使用JavaScript添加带有动态元素问题的HTML div

用户名

调用以下脚本可以动态添加html输入元素。下面的标记代码(大约30行)有两个问题。

1)当我在第二个输入框(foox1-“ last name”)下方添加标记的代码时,应显示两个输入框(foox1-“ last name”)。

2)其二是我需要id ='uggestions'来动态化,即链接到foox1。我应该像其余代码一样使用setAttribute,但我需要首先获得1)的帮助。

<script language="javascript">

var x = 1;

function add() {
var fooId = "foo";

for (i=1; i<=2; i++)
  {
    //Create an input type dynamically.
    var element = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", fooId+x+i);
    element.setAttribute("name", fooId+x+i);
    element.setAttribute("id", fooId+x+i);

    if(i==1){
           element.setAttribute("value", "First name");
           element.setAttribute("onkeyup", "lookup(this.value);");
           element.setAttribute("onblur", "fill();");

     }
    if(i==2){
          element.setAttribute("value", "Last name");

    }
    var foo = document.getElementById("fooBar");
    foo.appendChild(element);

    /************************************************
    This is where the problem is, in this if statement.  
    This part of the code is required for an autofil in the text box

    ************************************************/

    if(i==1){
        foo.appendChild("<div class='suggestionsBox' id='suggestions' style='display: 
            none;'><img src='upArrow.png' style='position: relative; top: -12px; left: 30px;'         
            alt='upArrow' /><div class='suggestionList' id='autoSuggestionsList'>&nbsp;       </div>    </div>");
    }

    /********************************
    end of code with issues
    ******************************/

    var space = document.createTextNode(" ");
    foo.appendChild(space);  

}
        i++;            
            var element = document.createElement("input");
    element.setAttribute("type", "button");
    element.setAttribute("value", "Remove");
    element.setAttribute("id", fooId+x+i);
    element.setAttribute("name", fooId+x+i);    
    element.setAttribute("onclick", "removeRow(this)");
    foo.appendChild(element);

    var br = document.createElement("br");
    foo.appendChild(br);

    x++;

}
</SCRIPT>
哈利

您不能.appendChild在以下情况下使用。.appendChild添加一个节点而不是一个字符串。

foo.appendChild("<div class='suggestionsBox' id='suggestions' style='display: 
            none;'><img src='upArrow.png' style='position: relative; top: -12px; left: 30px;'         
            alt='upArrow' /><div class='suggestionList' id='autoSuggestionsList'>&nbsp;       </div>    </div>");

它一定要是

foo.innerHTML += "<div class='suggestionsBox' id='suggestions' style='display: none;'><img src='upArrow.png' style='position: relative; top: -12px; left: 30px;' alt='upArrow' /><div class='suggestionList' id='autoSuggestionsList'>&nbsp;  </div>   </div>";

工作演示

编辑:对于您的问题的第二部分,您可以id='suggestions_for_' + fooId + x + i在上述声明中进行。(它会产生类似的东西id='suggestions_for_foo11'。)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS动态添加带有子元素和模型的新div

来自分类Dev

如何使用Angular动态添加带有控制器的div标签?

来自分类Dev

DOM在列表javascript中添加带有div的复选框

来自分类Dev

使用JavaScript动态创建具有多个元素的多个div?

来自分类Dev

带有div块的html css问题

来自分类Dev

如何在html表中动态创建带有div类的输入元素?

来自分类Dev

如何在rails中添加带有div的link_to?

来自分类Dev

在图标上添加带有load()的div单击许多同级

来自分类Dev

添加带有背景图像、标题和类别的 div 链接

来自分类Dev

带有div的动态CSS

来自分类Dev

带有div的Javascript / HTML Oninput

来自分类Dev

使用JQUERY选择带有.on('change')事件的动态插入的Div元素

来自分类Dev

javascript如何使用带有命名空间的脚本在div元素上使用hover元素?

来自分类Dev

如何在Javascript中将带有文本的字幕元素添加到div中

来自分类Dev

Javascript将元素添加到动态div

来自分类Dev

在Javascript中向div元素添加按钮的问题

来自分类Dev

使用jQuery动态添加div

来自分类Dev

使用jQuery动态添加div

来自分类Dev

使用JavaScript在div中添加/删除HTML

来自分类Dev

为动态添加的HTML div添加datepicker

来自分类Dev

我有 2 个 div 元素的 html/js 任务问题

来自分类Dev

在div内添加div

来自分类Dev

使用Javascript动态将div移到列表元素上方

来自分类Dev

使用JavaScript创建动态div

来自分类Dev

如何在div元素上调用方法时创建具有动态使用的ID的div元素?

来自分类Dev

使用javascript单击时添加带有文本组件的li元素

来自分类Dev

带有href的jQuery动态div

来自分类Dev

带有动态ID的jQuery Open div

来自分类Dev

动态创建带有htmlhelpers的div?

Related 相关文章

热门标签

归档