插入/在新div前面添加要在特定div之前填充的內容

Question

我有一個大型的網站，每個頁面都包含一個谷歌地圖用id #google_map_vc_box 我想知道如果我可以用JS或jQuery來插入新的一個div與它的前的特定div包含 #google_map_vc_box整個網站。

最近嘗試，但沒有雪茄（似乎也很丑陋/笨拙的解決方案）

var $container = $('#google_map_vc_box'),
    $d = $container.find('div');

var $n = $('<div>', {
    data: {
        id: new
    },
    text: sup
});

var $a = $d.filter(function () {
    return $(this).data('id') < new;
}).first();

if ($a.length) $a.after($n)
else $container.prepend($n);

Answer 1

要使用$n （新創建的<div> ，請在問題注釋中進行說明，然后將該元素插入#google_map_vc_box元素之前：

$n.insertBefore('#google_map_vc_box');

JS小提琴演示 。

要么：

$('#google_map_vc_box').before($n);

JS小提琴演示 。

而且，使用普通的JavaScript並不難：

var $n = document.createElement('div');
$n.id = 'new'; // remember to quote this value, unless it's a variable
var googleBox = document.getElementById('google_map_vc_box');

googleBox.parentNode.insertBefore($n, googleBox);

JS小提琴演示 。

甚至：

var googleBox = document.getElementById('google_map_vc_box');

googleBox.insertAdjacentHTML('beforebegin', '<div id="new"></div>');

JS小提琴演示 。

參考文獻：

• JavaScript：
  • Node.insertAdjacentHTML() 。
  • Node.insertBefore() 。
• jQuery的：
  • before() 。
  • insertBefore() 。