JavaScript在元素尾部追加字串

admin發表於2018-04-09
JavaScript字串

應用中，可能需要在一個元素的末尾追加字串，下面通過程式碼例項介紹一下如何實現。

實現方式有兩種，一種是追加文字節點，另一種通過innerHTML屬性實現。

如果要在字串尾部追加參閱JavaScript 追加字串一章節。

一.追加文字節點:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = () => {
  let txtNode = document.createTextNode("softwhy.com");
  let odiv = document.getElementsByTagName("div")[0];
  odiv.appendChild(txtNode);
}
</script>
</head>
<body>
  <div>螞蟻部落</div>
</body>
</html>

程式碼建立一個文字節點，然後將其追加到div的尾部。

二.通過innerHTML方式:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = () => {
  let str = "softwhy.com";
  let odiv = document.getElementsByTagName("div")[0];
  let originalStr = odiv.innerHTML;
  odiv.innerHTML = originalStr + str;
}
</script>
</head>
<body>
  <div>螞蟻部落</div>
</body>
</html>

首先通過innerHTML獲取div中原來的內容，然後追加內容後，再通過innerHTML寫入div。

相關閱讀：

（1）.箭頭函式參閱箭頭函式介紹一章節。

（2）.document.createTextNode()參閱document.createTextNode()一章節。

（3）.getElementsByTagName()參閱JavaScript getElementsByTagName()一章節。

（4）.innerHTML參閱JavaScript innerHTML 屬性一章節。

（5）.appendChild()參閱JavaScript appendChild()一章節。

相關文章