操作元素·第二部分_vision 生成带element元素-CSDN博客

本文链接：https://blog.csdn.net/vision_seven7/article/details/105023738

DOM元素的增删改

增

创建新元素

1.document.write()方法

在javascript中,document.write()方法；常用来网页向文档中输出内容。
例题：通过document.write()方法向网页文档中输入一段文字

document.write("Hello world")

以变量的方法输出

var str = "Hello world"
document.write(str)

可以直接在document.write()方法里添加html标签和css样式

document.write("<p style='width:100px;height:100px;color: pink;'>我是p标签</p>")

缺点：当使用document.write的时候，如果当前的文档流已经被关闭，那就会新创建一个文档流执行document.write语句，同时也就覆盖了之前的页面

2. innerHtml

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行，w3c标准
识别html标签：

<body>
		<div style="font-size: large; background-color: pink;width: 100px; height: 100px;"></div>
		<script>
			var div = document.querySelector("div")
			div.innerHTML = "<s>删除线</s>"
		</script>

</body>

打印出的结果保留空格和换行

<body>
    <p>
        我是p标签
        <span>我是span标签</span>
    </p>
    <script>
        var p = document.querySelector("p")
        console.log(p.innerHTML);
    </script>
</body>

局限性：不能在所有浏览器的所有HTML元素上设置innerHTML属性（比如，Internet
Explorer不允许你在表格的行元素上设置innerHTML属性）

3.createElement() 方法

定义：createElement() 方法通过指定名称创建一个元素
语法：document.createElement(nodename)
参数：字符串形式的标签名称
效果：创建的元素默认不在页面中显示，需要根据实际的需求，添加到页面中的某个位置上。

var btn=document.createElement("BUTTON");

使用场景：

如果结构复杂，使用innerHTML
其他情况均可以使用document.createElement()
如果要进行元素创建的结构内部已经具有其他元素，必须document.createElement()

向页面添加新的元素

1.appendChild()

语法：父元素.appendChild(“添加元素名”)

 <div style="width: 500px;height: 500px;background-color: pink;" id="box">
        <span id="span1">我是span标签1</span>
        <p id="p1">我是p标签1</p>
        <span id="span2">我是span标签2</span>
        <p id="p1">我是p标签2</p>

    </div>

    <div style="width: 300px;height: 300px;background-color:purple;" id="box2">
        <span id="span3">我是span标签3</span>
        <p id="p3">我是p标签3</p>
        <span id="span4">我是span标签4</span>
        <p id="p4">我是p标签4</p>

    </div>

特点：

新创建一个li元素添加到父元素的最后

 var box = document.getElementById("box")
 
 var newspan = document.createElement("span");
 newspan.innerText = "我是新建的span";
 box.appendChild(newspan)

如果要添加的元素原本就存在移动到父元素的最后

var span3 = document.getElementById("span3");
 box.appendChild(span3)

如果添加的元素有子元素该元素及其子元素都移动到元素的后面

var box2 = document.getElementById("box2")
box.appendChild(box2)

插入子元素：insertBefore()

语法：父元素.insertBefore(参数1，参数2)
参数1：需要新插入的元素
参数2：插入到哪个元素的前面

特点：

创建一个新元素，直接将新元素插入到指定的位置

//获取元素
var box = document.getElementById("box");
var p1 = document.getElementById("p1")


var newp = document.createElement("p")
newp.innerText = "我是新创建的p标签"

box.insertBefore(newp,p1);

2.原本就存在的元素移动到指定的位置

var box = document.getElementById("box");
var p2 = document.getElementById("p2")

 var p3 = document.getElementById("p3")
 box.insertBefore(p3,p2)

需要插入的元素有子元素元素及其子元素一起移动到指定位置

var box = document.getElementById("box");
var span2 = document.getElementById("span2");
var box2 = document.getElementById("box2")

box.insertBefore(box2,span2)

删

移出子元素 removeChild()

语法：父元素.remeveChild(子元素)

 <div style="width: 500px;height: 500px;background-color: pink;" id="box">
        <span id="span1">我是span标签1</span>
        <p id="p1">我是p标签1</p>
        <span id="span2">我是span标签2</span>
        <p id="p1">我是p标签2</p>

    </div>

    <div style="width: 300px;height: 300px;background-color:purple;" id="box2">
        <span id="span3">我是span标签3</span>
        <p id="p3">我是p标签3</p>
        <span id="span4">我是span标签4</span>
        <p id="p4">我是p标签4</p>

    </div>

特点：

元素不能调用该方法移出自己

var span1 = document.getElementById("span1")
span1.removeChild(span1)

父元素不能移出其他元素的子元素

var box = document.getElementById("box")
var p3 = document.getElementById("p3")

box.removeChild(p3)

父元素只能移除自己的子元素

var box = document.getElementById("box")
var span1 = document.getElementById("span1")
box.removeChild(span1)

改

替换子元素：replaceChild

语法：== 父元素.replaceChild(参数1，参数2)==
参数1：要替换的新元素
参数2：被替换的元素

 <div style="width: 500px;height: 500px;background-color: pink;" id="box">
        <span id="span1">我是span标签1</span>
        <p id="p1">我是p标签1</p>
        <span id="span2">我是span标签2</span>
        <p id="p1">我是p标签2</p>

    </div>

    <div style="width: 300px;height: 300px;background-color:purple;" id="box2">
        <span id="span3">我是span标签3</span>
        <p id="p3">我是p标签3</p>
        <span id="span4">我是span标签4</span>
        <p id="p4">我是p标签4</p>

    </div>

特点：

创建一个新元素，直接替换

var box = document.getElementById("box")
var span1 = document.getElementById("span1")

var newb = document.createElement("b")
newb.innertext = "我是b标签"

box.replaceChild(newb,span1);

原本就存在的元素把这个元素移上去替换掉原本的元素

var box = document.getElementById("box")
var span1 = document.getElementById("span1")
var span4 = document.getElementById("span4")

box.replaceChild(span4,span1)

3.需要插入的元素有子元素元素及其子元素一起移上去，替换掉原本的元素

var box = document.getElementById("box")
var span2 = document.getElementById("span2")
var box2 = document.getElementById("box2")

box.replaceChild(box2,span2)