沒有jQuery，創建一個新的元素後，一個指定的元素，然後「移動」頁面上的一些其他元素到它只有JAVASCRIPT

我有以下jQuery代碼注入元素後，另一個元素，然後移動一些元素。我無法找到任何明確的vanilla js函數，因爲大多數人都在暗示insertBefore或insertAdjacentElement，但它們都不在chrome控制檯中工作。我試圖在香草js中做到這一點。沒有jQuery，創建一個新的元素後，一個指定的元素，然後「移動」頁面上的一些其他元素到它只有JAVASCRIPT

jQuery('<div id="jsinjected"><i class="field-name-title"></i></div>').insertAfter('.field-name-body'); 
jQuery('.group-header .field-name-title ~ .field').appendTo('#jsinjected');

來源

2017-10-10 Patoshi パトシ

你可以發表你如何試圖'insertBefore' /'insertAdjacentElement'代碼？我不確定他們爲什麼不工作。 –

當我做一個insertBefore我得到一個「不是一個函數」的錯誤。請參閱：http://prntscr.com/gvok6i - 不知道我做錯了什麼。我想這些都是瀏覽器中的本地js函數。 –

'querySelectorAll'返回一個元素列表，你需要選擇一個（比如'b [0]'）並且調用那個元素上的方法。 –

這項工作？

const after = document.getElementById("element"); 
 
    const move = document.getElementById("move"); 
 
    const parent = after.parentNode; 
 
    const tmp = document.createElement("div"); 
 
    tmp.innerHTML = 
 
     `<div id="jsinjected"><i class="field-name-title">injected</i></div>`; 
 
    const newElement = tmp.firstElementChild; 
 
    var next = after.nextSibling; 
 
    if(next === null){ 
 
     next = document.createTextNode(" "); 
 
     parent.appendChild(next); 
 
    } 
 
    parent.insertBefore(newElement, next); 
 
    newElement.appendChild(move);

<div><div id="move">move this</div> 
 
    <div id="element">after</div></div>

來源

2017-10-10 16:52:24 HMR

沒有jQuery，創建一個新的元素後，一個指定的元素，然後「移動」頁面上的一些其他元素到它只有JAVASCRIPT

回答

相關問題