Как переместить позицию дом на текст?

Question

Скажите, что у меня есть:

<span id="root">hello , How are you?<span id="move">Ahmad</span></span>

Я хочу переместить элемент с идентификатором move после слова Hello (после 5 символов), чтобы я получил Hello Ahmad, How are you?

Есть ли способ достичь того, что мне нужно в javascript или jquery?

Answer 1

Зависит от того, сколько вам разрешено делать.

Чисто JS:

var child = document.getElementById("move");
var root = document.getElementById("root");

root.removeChild(child);
root.innerHTML = "Hello " + child.outerHTML + root.innerHTML.split("hello")[1].trim();

JS + Незначительный HTML Обновление

HTML:

<span id="root">Hello <span id="ending">, How are you?</span><span id="move">Ahmad</span></span>

JS

var ending = document.getElementById("ending");
var moveable = document.getElementById("move");

ending
    .parentNode
    .insertBefore
    (
        ending.parentNode.removeChild(moveable), 
        ending
    );

Answer 2

нашел другой более простой способ для этого:

$(document).ready(function(){
  var move = $('#move');
  var text = $('#root').text();
  $('#root').text(text.substring(0, 6));
  $('#root').append(move);
  $('#root').append(text.substring(6, text.length-5));
});

Демо: https://jsfiddle.net/t6dLkav4/5/

Answer 3

Вы можете попробовать что-то вроде следующего:

let root = document.getElementById("root");
let movable = document.getElementById("move");

root.textContent =
  root.firstChild.textContent.slice(0, 6) +
  movable.textContent +
  root.firstChild.textContent.slice(6);
root.remove(movable);

console.log(root);

<span id="root">hello , How are you?<span id="move">Ahmad</span></span>