Question

我需要帮助才能将Child元素附加到父元素。这是我的代码。我需要将$ input放在$ temp。

中

由于

function CaixaPin(){

  var $temp;
  $temp = $("<div></div>");
  $temp.addClass("caixa");

  var $input;
  for(var i=0; i<4; i++){
    $input = $("<div></div>");
    $input.addClass("caixaPin");
    $("body").append($input);
  }


  $("body").append($temp);

}

CaixaPin();

Answer 1

您可以附加到dom中尚未存在的元素，并存储在$temp

等变量中

变化：

$("body").append($input);

要：

$temp.append($input);

Answer 2

Body以及$temp以及input都是DOM元素。您可以将内容附加到DOM元素，这意味着您将在要附加的元素中添加一些HTML。

由于您要将所有内容附加到正文（即$("body").append()），因此您无法获得与$temp和$input相关的父子结构。而是将$input追加到$temp，然后将$temp追加到body。

function CaixaPin(){

  var $parentElement;
  $parentElement = $("<div></div>");
  $parentElement.addClass("caixa");

  var $childElement;
  for(var i=0; i<4; i++){
    $childElement = $("<div></div>");
    $childElement.addClass("caixaPin");
    $parentElement.append($childElement);
  }


  $("body").append($parentElement);

}

CaixaPin();

Answer 3

您应该在追加.map(id => { if(this.props.schema.collectionName.length < 0) return <Expandable> <ObjectDisplay key={id} parentDocumentId={id} schema={schema[this.props.schema.collectionName]} value={this.props.collection.documents[id]} /> </Expandable> return <h1>hejsan</h1> }之后迭代$input的循环。

尝试以下示例，

$temp

function CaixaPin(){
    var $temp;
    $temp = $("<div>$temp</div>");
    $temp.addClass("caixa");

    $("body").append($temp);
    
    var $input;
    for(var i=0; i<4; i++){
        $input = $("<div>$input of "+i+"</div>");
        $input.addClass("caixaPin");
        $(".caixa").append($input);
    }
    console.log("Inspect your html code and check.");
}
CaixaPin();

Answer 4

你正在寻找像这样的东西

https://jsfiddle.net/zyjje3r8/1

<div class='parent'>
parent div - click to add child
</div>
<div class='parent'>
parent div - click to add child
</div>

SCRIPT

$(".parent").on("click",function(){
$(this).append("<p>child element</p>")
})

使用Jquery将父元素附加到子元素

4 个答案: