Question

我的目标是将新元素添加到两个不同的位置。我有两个div，其ID为div1和div2。我想将一个新创建的span元素添加到两个div中。

document.querySelector('#div1').appendChild(span);

这很好，但是问题是这样

document.querySelector('#div2').appendChild(span);

运行第二个appendChild时，它将从div1中删除跨度。如何将span元素添加到两个地方？

（为使执行过程可视化，我添加了setTimeout）

const span = document.createElement('span');
span.appendChild(document.createTextNode('Test'));

document.querySelector('#div1').appendChild(span);
setTimeout(() => {
  document.querySelector('#div2').appendChild(span);
}, 3000)

#div1 {
  padding: 3px;
  background: red;
}

#div2 {
  padding: 3px;
  background: green;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 1

在现有范围上使用cloneNode方法：

更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

import android.content.Context;
import android.util.AttributeSet;

import java.lang.reflect.Field;
import java.lang.reflect.Method;

import androidx.viewpager.widget.ViewPager;

public class MyViewPager extends ViewPager {

    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * Set the currently selected page. If the ViewPager has already been through its first
     * layout with its current adapter there will be a smooth animated transition between
     * the current item and the specified item.
     *
     * @param item         Item index to select
     * @param smoothScroll True to smoothly scroll to the new item, false to transition immediately
     */
    @Override
    public void setCurrentItem(int item, boolean smoothScroll) {
        final Class<?> viewpager = ViewPager.class;
        int velocity = 1;

        try {
            Field mPopulatePending = viewpager.getDeclaredField("mPopulatePending");
            mPopulatePending.setAccessible(true);
            mPopulatePending.set(this, false);

            Method setCurrentItemInternal = viewpager.getDeclaredMethod("setCurrentItemInternal", int.class, boolean.class, boolean.class, int.class);
            setCurrentItemInternal.setAccessible(true);
            setCurrentItemInternal.invoke(this, item, smoothScroll, false, velocity);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

const span = document.createElement('span');
span.appendChild(document.createTextNode('Test'));

document.querySelector('#div1').appendChild(span);
setTimeout(() => {
  document.querySelector('#div2').appendChild(span.cloneNode(true));
}, 3000)

#div1 {
  padding: 3px;
  background: red;
}

#div2 {
  padding: 3px;
  background: green;
}

Answer 2

在DOM中的两个位置不能存在一个元素。您可以创建两次节点或克隆节点

    document.querySelector('#div1').appendChild(createSpan());
    setTimeout(() => {
       document.querySelector('#div2').appendChild(createSpan());
    }, 3000)

    function createSpan () {
      const span = document.createElement('span');
      span.appendChild(document.createTextNode('Test'));
      return span
    }

OR

    const span = createSpan();

    document.querySelector('#div1').appendChild(span);
    setTimeout(() => {
       document.querySelector('#div2').appendChild(span.cloneNode(true));
    }, 3000)

    function createSpan () {
      const span = document.createElement('span');
      span.appendChild(document.createTextNode('Test'));
      return span
    }

Answer 3

DOM元素只能是一个子元素，而只能是其他DOM元素的子元素。您将创建的span元素附加到第一个div，然后将其附加到第二个div。常识使跨度从第一个div中移除，然后移至第二个。您可以通过执行以下操作来实现所需的目标。

const span = document.createElement('span');

    span.appendChild(document.createTextNode('Test'));
    document.querySelector('#div1').appendChild(span);
    setTimeout(() => {
      document.querySelector('#div2').appendChild(span.cloneNode(true));
    }, 3000);

#div1 {
  padding: 3px;
  background: red;
}

#div2 {
  padding: 3px;
  background: green;
}

<div id="div1"></div>
<div id="div2"></div>

如何将新元素附加到两个不同的位置JavaScript ES6

3 个答案: