插入HTML中的JavaScript元素沒有jQuery的

Question

我怎麼能在純JavaScript重寫這個jQuery的操作之前：

$("#my_id").before('<span class="asterisk">*</span>'); 

Answer 1

這將做你想做的，而不需要像jQuery任何臃腫庫的支持。

var my_elem = document.getElementById('my_id'); 

var span = document.createElement('span'); 
    span.innerHTML = '*'; 
    span.className = 'asterisk'; 

my_elem.parentNode.insertBefore(span, my_elem); 

Answer 2

你可以讓你自己的函數在JavaScript中一樣，

代碼

var id = document.getElementById('my_id'); 
var s = document.createElement('span'); 
s.innerHTML = '*'; 
s.className = 'asterisk'; 
id.parentNode.insertBefore(s, id); 

InsertBefore Docs and Example

您可以像以前一樣創建一個函數，

​​

源從http://code.jquery.com/jquery-1.9.1.js

Answer 3

一個鮮爲人知的方法是element.insertAdjacentHTML。使用這種方法（由所有主流瀏覽器支持，包括IE 4），您可以採用任意HTML字符串，並將其插入文檔中的任何位置。

說明了該方法的力量，讓我們用你的例子...：

$("#my_id").before('<span class="asterisk">*</span>'); 

變爲

document.getElementById('my_id').insertAdjacentHTML('beforebegin', 
    '<span class="asterisk">*</span>'); 

insertAdjacentHTML的第一個參數確定插入位置。下面是使用jQuery的比較：

• $().before - 'beforebegin'
• $().prepend - 'afterbegin'
• $().append - 'beforeend'
• $().insertAfter - 'afterend'

正如你所看到的，這是非常容易使用。假設jQuery選擇器只返回一個元素，通常可以使用document.querySelector，但在這種特定情況下，使用document.getElementById會更有效。