JavaScript在元素尾部追加字符串

2018-4-9 20:58| 作者: admin| 查看: 1787| 评论: 0|来自: 蚂蚁部落

应用中,可能需要在一个元素的末尾追加字符串,下面通过代码实例介绍一下如何实现。

实现方式有两种,一种是追加文本节点,另一种通过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()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部