dom作业

Posted 2020-09-30 壹路桐行丨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dom作业相关的知识，希望对你有一定的参考价值。

<body>
        <select size="7" style="width: 200px;" id="slt">
            <option value="123">123</option>
        </select><br /><br />
        <input type="text" id="txt"/>
        <input type="button" value="添 加" id="btn"/>
    </body>
</html>
<script>
    var txt = document.getElementById(‘txt‘);
    var slt = document.getElementById(‘slt‘);
    
    document.getElementById(‘btn‘).onclick = function(){
        var opt = document.createElement(‘option‘);
        //opt.value = txt.value;
        opt.innerText = txt.value;
        slt.appendChild(opt);
        
        txt.value = ‘‘;
    }
</script>

要注意最后的txt.value=‘ ’。提高用户体验。

两个text表格属性相互移动的问题。

<body>
        <select id="left_slt" size="7" multiple="multiple" style="width: 150px;">
            <option>ABC</option>
            <option>123</option>
            <option>xyz</option>
            <option>IJK</option>
        </select>
            <input type="button" id="to_right" value="向右" />
            <input type="button" id="to_left" value="向左" />
            <select id="right_slt" size="7" style="width: 150px;">            
        </select>
    </body>
</html>
<script>
    var left_slt=document.getElementById(‘left_slt‘);
    var left_right=document.getElementById(‘left_right‘);
    
    document.getElementById(‘to_right‘).onclick=function(){
        right_slt.appendChild(left_slt.options[left_slt.selectedIndex]);
        
    }
    document.getElementById(‘to_left‘).onclick=function(){
        left_slt.appendChild(right_slt.options[right_slt.selectedIndex]);
        
    }
</script>

以上是关于dom作业的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript单行代码，也就是代码片段

实用代码片段将json数据绑定到html元素（转）

动态SQL基础概念复习（Javaweb作业5）

HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计咖啡网页设计美食餐饮网页设计...(代码片段

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

JavaScript 将片段附加到DOM而不是每个节点。