Live Code Editor

<html>
    <body>
        <div id="content">
            <p>Chelsea</p>
            <p>Manchester UTD</p>
            <p>Arsenal</p>
          </div>
       
        <input type="button" value="insertBefore Nodes" id="edit"/>
       
        <script language="javascript">
            // Lấy button
            var button = document.getElementById("edit");

// Thêm sự kiện click cho button
            button.addEventListener("click", function(){
              
            // Tạo một node mới
            var newNode = document.createElement("p");
            // thêm nội dung cho thẻ p mới tạo
            // có thể dùng innerHTML để thêm thay vì createTextNode
            newNode.innerHTML = "Manchester City";
             
            // Lấy thẻ cần đưa node mới lên trước, ở đây là node thứ 3
            // mình sẽ đưa Manchester City lên trước Arsenal
            var Node_name = document.querySelectorAll("div p")[2];
             
            // thêm node mới lên trước node cần insertBefore
            document.getElementById("content").insertBefore(newNode, Node_name);
             
            // đưa ra thông báo
            alert("Bạn đã thêm " + newNode.innerHTML + " lên trước : " + Node_name.innerHTML);
              
          	});
        </script>
    </body>
</html>