快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

JavaScript在元素尾部追加字符串

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

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

实现方式有两种,一种是追加文本节点,另一种通过innerHTML属性实现。

一.追加文本节点:

[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()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-21 10:07 , Processed in 0.103428 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部