How do I use JavaScript to select content and move to other elements?

Question

I need to move some text from demoBoxA to demoBoxB .

The demoBoxA parent element has an id selector, but the child element below it has no identifiable selector.

Is it possible to select the text content directly? Then move it into the demoBoxB sub-element (the demoBoxB sub-element has an id selector)

There are 2 difficulties with this issue.

1. The content of demoBoxA is dynamically generated by the program and the sort is not fixed. There are no identifiable selectors for the subelements.

2. only need to select part of the content. For example, in the example below, just move the phone model text of "Google", "Huawei", "BlackBerry".

Any help, thanks in advance!

<div class="container" id="demoBoxA">
    <div class="row">
        <div class="col-md-6">Samsung</div>
        <div class="col-md-6">Galaxy S10</div>
    </div>
    <div class="row">
        <div class="col-md-6">Google</div>
        <div class="col-md-6">Pixel 4</div>
    </div>
    <div class="row">
        <div class="col-md-6">Sony</div>
        <div class="col-md-6">Xperia 5</div>
    </div>
    <div class="row">
        <div class="col-md-6">Huawei</div>
        <div class="col-md-6">Mate 30 5G</div>
    </div>
    <div class="row">
        <div class="col-md-6">BlackBerry</div>
        <div class="col-md-6">KEY2</div>
    </div>
    <div class="row">
        <div class="col-md-6">Apple</div>
        <div class="col-md-6">iPhone 8</div>
    </div>
</div>

<div class="container" id="demoBoxB">
    <div class="row">
        <div class="col-md-6">Google</div>
        <div class="col-md-6" id="pixel"></div>
    </div>
    <div class="row">
        <div class="col-md-6">Huawei</div>
        <div class="col-md-6" id="mate"></div>
    </div>
    <div class="row">
        <div class="col-md-6">BlackBerry</div>
        <div class="col-md-6" id="key2"></div>
    </div>
</div>

Answer 1

You can chain selectors like this:

var rows = document.querySelectorAll("#demoBoxA > .row");

That will return a list of all rows inside of demoBoxA. If you need more info about chaining selectors, you can read about it here .

Then, to move the rows you can do this:

var demoBoxB = document.getElementById('demoBoxB');

rows.forEach((row) => {
  demoBoxB.appendChild(row);
});

If you just want the text inside each of the columns, you can do this:

var columns = document.querySelectorAll("#demoBoxA > .col-md-6");
var texts = [];
columns.forEach((column) => {
  texts.push(column.innerText);
});

Now, texts is an array of the text contents of each column.

If you want to select the cellphone models for each brand, you can do this:

var cols = Array.from(document.querySelectorAll("#demoBoxA > .col-md-6"));
var samsungCol = cols.find((col) => {
  return col.textContent == "Samsung";
});

var samsungPhones = [];
samsungCol.parentNode.childNodes.forEach((col) => {
  if (col != samsungCol) {
    samsungPhones.push(col);
  }
});

Now, samsungPhones is a list of columns, one for each Samsung phone (for example).

Answer 2

You can use html drag api.

Just add draggable=true for elements you want to drag and add event listeners for dragstart and dragend

html

<div class="container" id="demoBoxA">
    <div class="row " draggable="true">
        <div class="col-md-6">Samsung</div>
        <div class="col-md-6">Galaxy S10</div>
    </div>
    <div class="row" draggable="true">
        <div class="col-md-6">Google</div>
        <div class="col-md-6">Pixel 4</div>
    </div>
    <div class="row" draggabble="true">
        <div class="col-md-6">Sony</div>
        <div class="col-md-6">Xperia 5</div>
    </div>

</div>

<div class="container " id="demoBoxB">
    <div class="row " draggable="true">
        <div class="col-md-6">Google</div>
        <div class="col-md-6" id="pixel"></div>
    </div>
    <div class="row" draggable="true"> 
        <div class="col-md-6">Huawei</div>
        <div class="col-md-6" id="mate"></div>
    </div>
    <div class="row" draggable="true">
        <div class="col-md-6">BlackBerry</div>
        <div class="col-md-6" id="key2"></div>
    </div>
</div>

js

document.addEventListener('dragstart', function(e)
{
    item = e.target;
}, false);

document.addEventListener('dragend', function(e)
{
    document.getElementById("demoBoxB").appendChild(item)
}, false);

Note: you might have to add conditions to check whether the drop is actually happening in demoboxB