Question

我尝试使用javascript append child创建树结构。我创建了一个添加按钮。单击“添加”按钮，将创建一个根节点。单击“根”，将创建父节点。 但是在点击父级时，会创建父节点和子节点。我需要在单击父节点时仅创建子节点。怎么办？

  function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1" onclick="add_div2(this);">root</li>';
}

function add_div2(elem){
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
      div2.className = 'sub-div';
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2" onclick="add_div3(this);">parent</li>';
}


function add_div3(elem){
     var div3 = document.createElement('ul');
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      div3.innerHTML = '<li class="msg3" >child</li>';
}

 .ui-modal{
    	width: 100px;
    	border: 1px solid red;
      margin-left:0;
}
    .sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 100px;
        border: 1px solid blue;
}
    .inner-sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 250px;
        border: 1px solid blue;
}

<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>

我在脚本中使用了ul和li来创建追加子。如何在单击父节点上创建子节点。

Answer 1

在onclick功能中添加event.stopPropagation();

  function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1" onclick="event.stopPropagation();add_div2(this);">root</li>';
}

function add_div2(elem){
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
      div2.className = 'sub-div';
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2" onclick="event.stopPropagation();add_div3(this);">parent</li>';
}


function add_div3(elem){
     var div3 = document.createElement('ul');
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      div3.innerHTML = '<li class="msg3" >child</li>';
}

 .ui-modal{
    	width: 100px;
    	border: 1px solid red;
      margin-left:0;
}
    .sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 100px;
        border: 1px solid blue;
}
    .inner-sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 250px;
        border: 1px solid blue;
}

<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>

Answer 2

点击父div

时使用event.stopPropagation();

＆＃13;

function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1" onclick="add_div2(event,this);">root</li>';
}

function add_div2(event,elem){
  
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
      div2.className = 'sub-div';
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2" onclick="add_div3(event,this);">parent</li>';
}


function add_div3(event,elem){
     var div3 = document.createElement('ul');
     event.stopPropagation();
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      console.log()
      div3.innerHTML = '<li class="msg3" >child</li>';
}

＆＃13;

 .ui-modal{
    	width: 100px;
    	border: 1px solid red;
      margin-left:0;
}
    .sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 100px;
        border: 1px solid blue;
}
    .inner-sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 250px;
        border: 1px solid blue;
}

＆＃13;

<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>

＆＃13;

Answer 3

问题在于事件冒泡。您对child的点击也会传播到parent ul，因此会创建点击两次效果。

使用“stopPropagation()”停止此传播，为此您需要事件对象，您可以在函数中传递它。

在此处阅读有关活动的更多信息： https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events 关于事件冒泡，请向下滚动到该页面上的“事件冒泡和捕获”部分。

function add_div(){
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

  div1.innerHTML = '<li class="msg1" onclick="add_div2(event, this);">root</li>';
}

function add_div2(event, elem){
    event.stopPropagation();
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
      div2.className = 'sub-div';
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2" onclick="add_div3(event, this);">parent</li>';
}


function add_div3(event,elem){
event.stopPropagation();
     var div3 = document.createElement('ul');
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      div3.innerHTML = '<li class="msg3" >child</li>';
}

.ui-modal{
    	width: 100px;
    	border: 1px solid red;
      margin-left:0;
}
    .sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 100px;
        border: 1px solid blue;
}
    .inner-sub-div{
        margin-top: 10px;
        width: 150px;
        margin-left: 250px;
        border: 1px solid blue;
}

<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>

在javascript中使用追加子的树结构不能正常工作

3 个答案: