javaScript---传统的DOM动态添加标签与内容

最新推荐文章于 2022-12-29 16:23:42 发布

chenyue626604

最新推荐文章于 2022-12-29 16:23:42 发布

阅读量637

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/1434486/blog/509749

版权

传统为文本添加内容的方法DOM提供的write与innerHTML：

document.write()方法将文本的表现与行为混合在一起，即将行文方法写在了文本的内容中，当浏览器不支持JavaScript或者用户禁掉了浏览器的JavaScript功能时，用户将得不到其需要的内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WriteTest</title>
</head>
<body>
<script>
document.write("<p>传统的DOM方法：document.write()</p>");
</script>
</body>
</html>

innerHTML方法：

innerHTML相比较于上面的Write()方法，更加的灵活多变。它不仅可以读取内容同时还能把内容写进你需要的地方。innerHTML还支持行为与表现分离，不需要像write()那样将方法写进文本的内容中。但是innerHTML忽略了文本内容的细节，它只能将文本的内容进行全部替换，当你仅仅只想插进某一部分时，那么将不是最好的选择。

从文本中读取内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>innerHTMLTest</title>
<script type="text/javascript">
function getInnerHTML()
  {
  alert(document.getElementById("innerHTML_get").innerHTML);
  }
</script>
</head>
<body>
<div id="innerHTML_get">
<p>This is<em>a test</em>content</p>
</body>
</html>

将内容写进文本中：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>innerHTMLTest</title>
<script type="text/javascript">
function setInnerHTML()
  {
  var testdiv = document.getElementById("innerHTML_set");
  testdiv,innerHTML="<p>This is<em>a test</em>content</p>";
  }
</script>
</head>
<body>
<div id="innerHTML_set"></div>
</body>
</html>

转载于:https://my.oschina.net/u/1434486/blog/509749

chenyue626604

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript---传统的DOM动态添加标签与内容

传统为文本添加内容的方法DOM提供的write与innerHTML： document.write()方法将文本的表现与行为混合在一起，即将行文方法写在了文本的内容中，当浏览器不支持JavaScript或者用户禁掉了浏览器的JavaScript功能时，用户将得不到其需要的内容。 <!...
复制链接

扫一扫