第七章动态创建标记

一直饿着肚子

已于 2023-04-03 10:12:27 修改

阅读量210

点赞数

分类专栏： DOM编程艺术文章标签： javascript 前端

于 2023-03-20 21:09:16 首次发布

本文链接：https://blog.csdn.net/m0_57005796/article/details/129571344

版权

DOM编程艺术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

传统方法

document.write()

即使把document.write语句挪到外部函数，也还是需要在标记的body部分使用script标签才能调用那个函数。

function insertParagraph(text){
	var str = "<p>";
	str += text;
	str += "</p>";
	document.write(str);
}

我们把这个函数保存到外部JS文件中，为了调用这个函数，必须在标记里插入script标签：

<!DOCTYPR html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Test</title>
	<script scr="example.js"></script>
</head>
<body>
	<script>
		insertParagraph("This is inserted.");
	</script>
</body>
</html>

应该避免使用document.write方法

innerHTML 属性

这个属性可以用来读、写某给定的元素里的HTML内容，一旦使用它，目标篇元素里的内容将全会被替换掉。

//该方法将会把一段HTMl内容插入对应的标签
window.onload = function(){
	var testdiv = document.getElementById("testdiv");
	testdiv.innerHTML = "<p>I inserted <em> this </em> content.</p>"
}

DOM方法

createElement方法

var para = document.vreateElement("p");

上面这条语句将创建一个新的p元素，并赋值给一个变量。此时它已经是一个元素节点，但没有连接到DOM树上。

appendChild方法

把新创建的节点插入到某个文档的节点树的最好的办法就是，让他成为这个文档某一个现有节点的子节点。

var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);

createTextNode方法

createElement方法只能创建元素节点，想把文本放入p元素，要创建一个文本节点，用方法createTextNode。

vat text = document.createTextNode(text);

和createElement方法一样，此时这个节点也是javascript世界里的一个孤儿，没有被插入任何一个文档。我们可以使用appendChild方法，把这个文本节点插入为某个现有元素的子节点上。
这样就达到动态创建标记的目的了。

insertBefore()

这个方发将把一个新元素插入到一个现有的元素前面。使用方法：1.新元素：想插入的元素。2.目标元素：插入到那个元素之前。3.父元素：目标元素的父元素。

//模板
parentElement.insertBefore(newElement,targetElement)

在现有元素后插入一个新元素

DOM本身没有实现，要自己编写。

function insertAfter(newElement,targetElement){
	var parent = targetElement.parentNode;
	if(parent.lastChild == targetElement){
		parent.appendChild(newElement);
	}else{
		parnet.insertBefore(newElement,targetElement.nextSibling);
	}
}