html页面动态操作总结

初叙

已于 2024-09-12 17:19:35 修改

阅读量687

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript基础文章标签： html 前端 javascript

于 2021-05-27 09:59:38 首次发布

本文链接：https://blog.csdn.net/weixin_42479293/article/details/117321448

JavaScript基础专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何在网页中动态创建li元素并应用CSS样式，以及如何通过JavaScript操作元素的class来切换菜单状态。涉及了`createElement`、`classList`和`search`方法的应用，适合前端开发者深入理解DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）给父元素中填充新的元素

//创建新的子元素
var li_f = document.createElement("li");
//元素添加样式
li_f.className = a===0?"layui-nav-item layui-nav-itemed":"layui-nav-item";
//填充到父元素中
treelayer.appendChild(li_f);

（2）修改元素的class

if ($li.className.search("layui-nav-itemed") > -1) {
    //关闭菜单
    checked = false;
    //layui-icon layui-icon-triangle-r
    $i.classList.remove("layui-icon-triangle-d");//从class列表中删除指定的class
    $i.classList.add("layui-icon-triangle-r");//给元素添加一个class
}else {
    //打开菜单
    checked = true;
    //layui-icon layui-icon-triangle-d
    $i.classList.remove("layui-icon-triangle-r");
    $i.classList.add("layui-icon-triangle-d");
}

（3）search()方法

从字符串中查找子串，返回子串第一个字符的下标，找不到返回-1

str.search("substr")

（4）获取元素标签中的内容

$(".decument").innerText;

$this.parentNode.parentNode.previousSibling.children[1].innerText;

（5）获取input框的输入内容

var keyString = $("#keyString").val();

（6）清空input框的输入

$("#keyString").val("");