如何使用 Javascript 更改和添加新的 HTML 对象？答案

【问题标题】：How to change and add new HTML objects with Javascript?如何使用 Javascript 更改和添加新的 HTML 对象？
【发布时间】：2011-11-19 03:03:59
【问题描述】：

我知道一点 PHP 和 HTML/CSS，并且我制作了一个简单的测验程序，允许用户创建和执行存储在 MySQL 数据库中的测验。现在我想做的是提高程序的可用性和效率。

在 createQuestions 表单上，有八个文本框，用户可以在其中的 2 或 8 个框中填写答案。虽然我觉得这八个看起来都很乱，我想要的是有两个文本框，当第二个有文本时，第三个出现，依此类推..最多八个

我花了几个小时学习了一些基本的 JS，并设法掌握了它，因此有一个按钮可以更改输入框、标签和每行单选按钮的可见性属性。虽然我写了很多代码行，但效率很低：p - 给每个对象一个单独的 ID，但它仍然不能很好地工作。

下面是我的 HTML 布局示例，我有八个，虽然我可以用一个替换它，以及一个限制为 8 个的 PHP for 循环。

<div id="c">
<p class="subFont" id="cT" style="display:none;">Answer 3</p>
<input type="text" name="optionC"  class="textbox" style="display:none;" id="cI">
<input type="radio" name="correctAns" value="c" id="cR" style="display:none;">
<input type ="button" name="add" value="d" style="background-color:green;" onclick="addBox('d', 'inline')" id="cB" style="display:none;">
</div>

关于如何编写上述脚本有什么建议吗？请您发表评论或简要解释您的工作原理，以便我可以从中学习:)

提前感谢你们，我非常感谢stackoverflow上的所有人；）

ps，有什么学习js资源的建议吗？

【问题讨论】：

我建议您查看 jQuery 或其他此类库，而不是为此使用纯 js。它会为您节省大量时间。基本思想是除了前两个之外隐藏您的输入，当用户开始输入第二个时，将显示第三个，依此类推。我不建议添加/删除元素。如果你隐藏/显示而不是附加/删除它会在 js 被禁用的情况下工作，并且通常会更少错误，我认为。
好的，现在调查一下，谢谢！ :)

标签： php javascript html dom object

【解决方案1】：

纯 Javascript

隐藏/显示对象 id="cR"

// hide
document.getElementById('cR').style.display = 'none';

// show
document.getElementById('cR').style.display = 'block';

将文本区域附加到

document.getElementById('c').innerHTML += '<textarea name=".." id=".."></textarea>';

事件：

<input type="text" id="xxx" onchange="your action here" />

jQuery

隐藏/显示对象 id="cR"

// hide
$('#cR').hide();
$('#cR').fadeIn(); // with fade in effect

// show
$('#cR').show();
$('#cR').fadeOut(); // width fade out effect

将文本区域附加到

$('#c').append('<textarea name=".." id=".."></textarea>');

事件：

$('#xxx').change(function() {
    your action here
});

【讨论】：

+1 用于发布 jQuery 解决方案。顺便说一句 jQuery=JavaScript，所以我会把第一个标题改成Pure JavaScript ;)

【解决方案2】：

另一种在页面中动态添加元素的方法..

    <html>
       <head>
        <script>

            function addElement(obj) {
                text_limit = 5; // limit text then add text after that.    
                var text_lenght = obj.value.length;
                if(text_lenght >= text_limit){

                    var mainElement = document.getElementById('myDiv');
                    var counter= mainElement.getElementsByTagName('textarea').length;
                    var newTextArea = document.createElement('textarea');
                    var textareaname = 'txt_area'+counter;
                    newTextArea.setAttribute('id',textareaname );
                    newTextArea.onkeydown= function() {
                        addElement(this);
                    } 
                    mainElement.appendChild(newTextArea);

                }
            }

        </script>
        </head>
        <body>
            <div id="myDiv">
                <textarea id="txt_area2" onkeyup="addElement(this);"></textarea></div>
        </body>
    </html>

【讨论】：

onkeydown 错误，innerHTML 错误。 <script> in <html> 是错误的