Help to move an element with Javascript?

Question

Help to move an element with Javascript?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I want to move a div element that is in a TD from one table to another TD of the same row, and I can not do it without errors, so I consult it to see if someone can help me:

<table>

<thead>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</thead>

<tbody>
<tr>
<td> <div class="ABC"></div> <div class="Mover"><a href="/lolo/1"></a></div></td>
<td> </td>
<td> </td>
<td><a href="/lola/1"></a></td>
</tr>

<tr>
<td> <div class="ABC"></div> <div class="Mover"><a href="/lolo/2"></a></div></td>
<td> </td>
<td> </td>
<td><a href="/lola/2"></a></td>
</tr>

</tbody>
</table>

I'm trying with this code:

[].forEach.call(document.querySelectorAll('[href^="/lola/"]'), function(elem) {

    var slw = elem.parentNode.parentNode.querySelector('.Mover');
    //se encuentran los elementos con la clase "Mover" dentro de la misma FILA.
    var slwdata = document.createElement('div');
    slwdata.innerHTML = slw.outerHTML;
    elem.parentNode.appendChild(slwdata);
});

Finally I try to add it to the current TD. First I received an error saying it was not a node so I am trying to do it by creating an element first.

Finally, the last TD of each ROW should be left like this:

<td>
<a href="/lola/2"></a>
<div class="Mover"><a href="/lolo/2"></a></div>
</td>

Eliminando el DIV con CLASE Mover de laa anteriores TD..

If the previous code is executed twice in the console it works (it does not erase the DIV OF the PREVIOUS td but that is not a problem because I can erase it, but the first time it gives the error: VM12047: 5 Uncaught TypeError: Can not read property 'outerHTML' of null at: 5: 29 at NodeList.forEach () at: 1: 12

javascript html5 dom

asked by Daniel Martinez 28.10.2018 в 21:49

source

2 answers

traverse 12 csv files with UTL_FILE Hide date Datatime php 0000-00-00 00:00:00

score 0 · Answer 1

I'm not sure if that's what you wanted, but I made a couple of modifications to your js (apart from adding some extra info to the html to know if the links were shown) and something like this was left. Tell me if it's what you needed:

const links = document.querySelectorAll('[href^="/lola/"]')
links.forEach(function(elem) {

    var slw = elem.parentNode.parentNode.querySelector('.Mover');
    //se encuentran los elementos con la clase "Mover" dentro de la misma FILA.
    var slwdata = document.createElement('div');
    slwdata.innerHTML = slw.outerHTML;
    elem.parentNode.appendChild(slwdata);
});

<table>

  <thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </thead>

  <tbody>
    <tr>
      <td>
        <div class="ABC">link:</div>
        <div class="Mover"><a href="/lolo/1">1</a></div>
      </td>
      <td> </td>
      <td> </td>
      <td><a href="/lola/1">1</a></td>
    </tr>

    <tr>
      <td>
        <div class="ABC">link:</div>
        <div class="Mover"><a href="/lolo/2">2</a></div>
      </td>
      <td> </td>
      <td> </td>
      <td><a href="/lola/2">2</a></td>
    </tr>

  </tbody>
</table>

Beware, the code you put in, rather than moving, is copying.

score 0 · Answer 2

With your code it would be something like:

document.getElementById("mover").addEventListener("click",() => {

  const divs = document.querySelectorAll('[href^="/lola/"]')
  divs.forEach((e) => {
    var slw = e.parentNode.parentNode.querySelector('.Mover');
    var slwdata = document.createElement('div');
    slwdata.innerHTML = slw.outerHTML;
    e.parentNode.appendChild(slwdata);
    slw.remove();
  });

});

.ABC{
  border:1px solid red;
}

.Mover{
  border:1px solid blue;
}

<table border="1">
  <thead>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </thead>
  <tbody>
    <tr>
      <td> 
        <div class="ABC">DIV ABC</div>
        <div class="Mover">
          <a href="/lolo/1">DIV Mover</a>
        </div>
      </td>
      <td></td>
      <td></td>
      <td>
        <a href="/lola/1"></a>
      </td>
    </tr>
    <tr>
      <td> 
        <div class="ABC">DIV ABC</div> 
        <div class="Mover">
          <a href="/lolo/2">DIV Mover</a>
        </div>
      </td>
      <td></td>
      <td></td>
      <td>
        <a href="/lola/2"></a>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4" align="center">
        <button id="mover">Mover DIVs</button>
      </td>
    </tr>
  </tfoot>
</table>

Simply go through each link and set its HTML with innerHTML , the set value of the html will be slw.outerHTML which is the html of the div you want to move.