简单操作dom节点的属性和内容

最新推荐文章于 2024-05-03 11:47:20 发布

barbed

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量79

点赞数

文章标签： javascript dom

本文链接：https://blog.csdn.net/barbed/article/details/108429096

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作DOM节点的属性和内容</title>
    <script>
        window.onload = function () {
            var parent = document.getElementById('one');
            var newChild = document.createElement('div');
            //给parent节点添加内容
            parent.innerText = '我是parent';
            //给newChild节点添加内容
            newChild.innerHTML = 'hello';
            // newChild.textContent = 'hello 你好';
            //给parent节点添加子节点newChild
            parent.appendChild(newChild);
            //获取属性值
            console.log(parent.id);
            console.log(parent['title']);
            //修改属性值
            parent.title = 'two1';
            console.log(parent);
            //移除属性
            parent.removeAttribute('title');
            console.log(parent);
        }
    </script>
</head>

<body>
    <div id="one" title="two"></div>
</body>

</html>

barbed

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单操作dom节点的属性和内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>操作DOM节点的属性和内容</title> <script> window.onlo
复制链接

扫一扫