JavaScript如何增加p元素

發(fā)布時間：2022-02-08 15:06:06 來源：億速云閱讀：178 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了JavaScript如何增加p元素的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript如何增加p元素文章都會有所收獲，下面我們一起來看看吧。

JavaScript增加p元素的方法：1、使用“document.createElement("p")”語句創(chuàng)建一個新的p元素節(jié)點(diǎn)；2、使用“父節(jié)點(diǎn).appendChild(p元素節(jié)點(diǎn))”語句將新創(chuàng)建的p節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)中。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

JavaScript增加p元素

實(shí)現(xiàn)思想：

1、利用document.createElement()創(chuàng)建一個節(jié)點(diǎn)

2、把創(chuàng)建的節(jié)點(diǎn)利用父Element.appendChild(子element)方法添加至父節(jié)點(diǎn)

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			p{
				height: 20px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>

		<div id="div1">
			<p id="p1">這是一個段落。</p>
			<p id="p2">這是另一個段落。</p>
		</div>
		<button onclick="myFunction()">添加p元素</button>
		<script>
			function myFunction() {
				var para = document.createElement("p"); //創(chuàng)建新的<p> 元素
				var node = document.createTextNode("這是一個新段落。"); //創(chuàng)建文本節(jié)點(diǎn)
				para.appendChild(node); //向 <p> 元素追加這個文本節(jié)點(diǎn) 
				//向已有的元素追加這個新元素 
				var element=document.getElementById("div1"); 
				element.appendChild(para);
			}
		</script>
	</body>
</html>

JavaScript如何增加p元素

關(guān)于“JavaScript如何增加p元素”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript如何增加p元素”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

JavaScript如何增加p元素

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽