么是文本節(jié)點(diǎn)

在HTML文檔中，文本節(jié)點(diǎn)是一種特殊的dom節(jié)點(diǎn)，它包含文本內(nèi)容，沒有任何標(biāo)記或?qū)傩浴?/span>

<p>這是一段文本節(jié)點(diǎn)</p>

在上面的代碼中，<p>元素包含了文本內(nèi)容"這是一段文本節(jié)點(diǎn)"，這段文本就是文本節(jié)點(diǎn)。

修改文本節(jié)點(diǎn)

JavaScript中提供了多種方法修改文本節(jié)點(diǎn)的內(nèi)容，其中最常用的方法是使用textContent和innerText。

textContent返回一個(gè)元素的所有子節(jié)點(diǎn)的文本內(nèi)容，包括隱藏的元素，而 innerText只返回可視元素的文本內(nèi)容。

const myTextElement=document.querySelector('p');  // 獲取元素節(jié)點(diǎn)
// 修改文本節(jié)點(diǎn)內(nèi)容
myTextElement.textContent='這是新的文本內(nèi)容';

使用innerHTML屬性也可以修改文本節(jié)點(diǎn)的內(nèi)容，但應(yīng)該注意的是，設(shè)置innerHTML屬性可能會(huì)帶來安全風(fēng)險(xiǎn)，因?yàn)樗梢园瑦阂獯a。

myTextElement.innerHTML='這是新的文本內(nèi)容';  // 修改文本節(jié)點(diǎn)內(nèi)容

另外，還可以通過插入文本節(jié)點(diǎn)方式，向現(xiàn)有的文本節(jié)點(diǎn)添加新的內(nèi)容。例如：

const myTextElement=document.querySelector('p');  // 獲取文本節(jié)點(diǎn)
const newText=document.createTextNode('新的文本內(nèi)容');  // 創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)
myTextElement.appendChild(newText);  // 將新的文本節(jié)點(diǎn)添加到已有文本節(jié)點(diǎn)后面

獲取元素節(jié)點(diǎn)的文本內(nèi)容

在JavaScript中獲取元素節(jié)點(diǎn)的文本內(nèi)容，我們可以使用以下代碼：

const myTextElement=document.querySelector('p');  // 獲取元素節(jié)點(diǎn)
const textContent=myTextElement.textContent;  // 獲取文本內(nèi)容
console.log(textContent);  // 打印輸出：這是一段文本節(jié)點(diǎn)

文本節(jié)點(diǎn)的屬性和方法總結(jié)

JavaScript提供了多種方法操作文本節(jié)點(diǎn)的屬性和方法，其中最常用的是textContent和innerText。

• textContent - 獲取或設(shè)置元素節(jié)點(diǎn)文本內(nèi)容，包括所有子節(jié)點(diǎn)文本；會(huì)保留換行符和空格等文本格式
• innerText - 獲取或設(shè)置元素節(jié)點(diǎn)的文本內(nèi)容，但不包括所有的節(jié)點(diǎn)；不會(huì)保留換行符和空格等文本格式，會(huì)自動(dòng)去除文本首尾的空白字符
• append()方法 - 將新的文本節(jié)點(diǎn)添加到已有文本節(jié)點(diǎn)后面

、document.write 創(chuàng)建

document.write() 方法可向文檔寫入 HTML 表達(dá)式或 JavaScript 代碼。

html和css代碼

 <input type="button" value="創(chuàng)建一個(gè)p" id="btn"/>

JavaScript代碼