在網頁開發中，很多時候需要通過JavaScript來添加文字到網頁中，這樣可以更加靈活地控制顯示內容和樣式。下面我將為大家介紹在JavaScript中添加文字的方法和常見應用。 首先，我們可以使用innerHTML方法來添加文字到DOM元素中。例如，以下代碼可以在一個div元素中顯示“Hello World”：

<div id="test"></div>
<script>
document.getElementById("test").innerHTML = "Hello World";
</script>

這樣，在網頁中可以看到一個包含“Hello World”的div元素。除了直接添加文字，我們還可以使用HTML標簽來設置樣式，比如以下代碼可以在網頁中顯示一個藍色的h1標題：

<div id="test"></div>
<script>
document.getElementById("test").innerHTML = "<h1 style='color: blue;'>Hello World</h1>";
</script>

這樣，在網頁中可以看到一個藍色的“Hello World”標題。 除了innerHTML方法，我們也可以使用document.createTextNode方法來動態創建一個文本節點，并將其添加到DOM元素中。以下代碼可以實現在一個div元素中添加文本節點：

<div id="test"></div>
<script>
var text = document.createTextNode("Hello World");
document.getElementById("test").appendChild(text);
</script>

這種方法雖然沒有innerHTML方法那么方便，但是在一些特殊情況下，比如需要動態修改一段文字中某個單詞的樣式，就可以使用這種方法。 除了在簡單元素中添加文字，我們還可以在表格、列表等復雜的HTML結構中添加文字。比如以下代碼可以在一個表格中添加兩個cell：

<table id="test">
<tr>
<td></td>
<td></td>
</tr>
</table>
<script>
var cells = document.getElementById("test").rows[0].cells;
cells[0].innerHTML = "Cell 1";
cells[1].innerHTML = "Cell 2";
</script>

這樣，在網頁中可以看到一個包含兩個cell的表格，并分別顯示了“Cell 1”和“Cell 2”。 除了動態添加文字，我們還可以動態修改現有文字的內容和樣式。比如，以下代碼可以實現鼠標懸停在一個div元素上時，將其文字的顏色改變為紅色：

<div id="test">Hello World</div>
<script>
document.getElementById("test").onmouseover = function() {
this.style.color = "red";
};
document.getElementById("test").onmouseout = function() {
this.style.color = "black";
};
</script>

這樣，在鼠標懸停在“Hello World”文字上時，其顏色將變為紅色。 最后需要注意的是，在使用JavaScript動態添加或修改文字時，應該保證代碼的兼容性和安全性。特別是在處理用戶輸入或直接操作DOM元素時，應該避免出現XSS攻擊等安全問題。