原生 js 首行末尾添加

收费界的一股清流

已于 2023-09-16 12:00:18 修改

阅读量184

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2023-09-16 11:54:43 首次发布

本文链接：https://blog.csdn.net/m0_62227630/article/details/132916827

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="main">

</div>
<ul id="list">
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ul>
<input id="txt" type="text">
<input type="button" id="btn" value="插入">
<script>
    // document.createElement("元素名");       // 创建元素节点
  // document.createTextNode("文本内容");   // 创建文本节点
  // 如果 js 提前加载好，但是 html 没有渲染出来，就会导致无法动态添加标签

     // onload 方法是等待整个页面加载完之后再执行
    window.onload =function (){
        // 创建节点
        const h1 =document.createElement('h1');
        const content = document.createTextNode('小白教育 蜡笔小新')
        // console.log(h1);
        // console.log(content);
        // 在 h1 标签添加文本子节点
        h1.appendChild(content);
        // console.log(h1);
        const main = document.querySelector('.main');
        // console.log(main)
         main.appendChild(h1);
        //  const p = document.createElement('p');
        //  const kk =document.createTextNode('hello world!!')
        //  p.appendChild(kk)
        // main.appendChild(p);
        // 现获的点击按钮
        var obtn = document.getElementById('btn');
        // 点击出发
        obtn.onclick = function (){
            // 先获得ul列表
            var oul = document.getElementById('list');
            //获得输入框
            var otxt = document.getElementById('txt');
            // 获得输入框内容
            var textNode = document.createTextNode(otxt.value);
            //动态创建一个li元素
            var oli = document.createElement('li')
            // 内容放到li标签中
            oli.appendChild(textNode);
            // 差入到列表    给插入位置不然报错
            oul.insertBefore(oli,oul.firstChild);


        }

    }
</script>
</body>
</html>

末行添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="main">

</div>
<ul id="list">
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ul>
<input id="txt" type="text">
<input type="button" id="btn" value="插入">
<script>
    // document.createElement("元素名");       // 创建元素节点
  // document.createTextNode("文本内容");   // 创建文本节点
  // 如果 js 提前加载好，但是 html 没有渲染出来，就会导致无法动态添加标签

     // onload 方法是等待整个页面加载完之后再执行
    window.onload =function (){
        // 创建节点
        const h1 =document.createElement('h1');
        const content = document.createTextNode('小白教育 蜡笔小新')
        // console.log(h1);
        // console.log(content);
        // 在 h1 标签添加文本子节点
        h1.appendChild(content);
        // console.log(h1);
        const main = document.querySelector('.main');
        // console.log(main)
         main.appendChild(h1);
        //  const p = document.createElement('p');
        //  const kk =document.createTextNode('hello world!!')
        //  p.appendChild(kk)
        // main.appendChild(p);
        // 现获的点击按钮
        var obtn = document.getElementById('btn');
        // 点击出发
        obtn.onclick = function (){
            // 先获得ul列表
            var oul = document.getElementById('list');
            //获得输入框
            var otxt = document.getElementById('txt');
            // 获得输入框内容
            var textNode = document.createTextNode(otxt.value);
            //动态创建一个li元素
            var oli = document.createElement('li')
            // 内容放到li标签中
            oli.appendChild(textNode);
            // 差入到列表    给插入位置不然报错
            // oul.insertBefore(oli,oul.firstChild);
            //末尾添加
            oul.appendChild(oli)


        }

    }
</script>
</body>
</html>