HTML DOM BR 对象
JavaScript基础 2022-05-13 16:16:39小码哥的IT人生shichen
HTML DOM BR 对象
BR 对象
BR 对象代表 HTML <br> 元素。
访问 BR 对象
您可使用 getElementById() 来访问 <br> 元素：
示例代码：
var x = document.getElementById("myBR");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h3>如何访问 BR 元素的演示</h3>
<div>This is a div <br id="myBR"> element with some <br> line breaks.</div>
<p>单击按钮将文档中的第一个 BR 元素设置为 display="none"。</p>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var x = document.getElementById("myBR");
x.style.display = "none";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
创建 BR 对象
您可使用 document.createElement() 方法来创建 <br> 元素：
示例代码：
var x = document.createElement("BR");
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>单击按钮来创建一些 BR 元素。</p>
<button onclick="myFunction()">试一试</button>
<p>当您单击该按钮时，会在 div 中的每个 span 元素之前插入一个 br 元素，从而在下面的文本中进行适当的换行。</p>
<div id="myDIV">
<span>Hello,</span>
<span>My name is Bob.</span>
<span>I live in Bobville.</span>
<span>I am 45 years old.</span>
</div>
<script>
function myFunction() {
// 获取 id="myDIV" 的 div 元素
var div = document.getElementById("myDIV");
// 获取 div 内的所有 span 元素
var spans = div.getElementsByTagName("SPAN");
// 创建一个循环，它将在 div 中的每个 span 元素之前插入一个 br 元素，从第二个 span 元素开始
var i;
for (i = 1; i < spans.length; i++) {
var newElem = document.createElement("BR");
div.insertBefore(newElem, spans[i]);
}
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
相关页面
HTML 参考手册：HTML <br> 标签
