insertAdjacementHTMLは関数ではありません<anonymous>

Question

別のウェブサイトに既に存在するボタンの後にボタンを配置しようとしています。私はChromeのコンソールでそれをテストしようとしていますが、それを把握することはできません。

var buttonPosition = document.getElementById('<button class="button black ">Black</button>'); 

これは私のボタンを置きたいボタンです。

Iは次いで、私は私のように、これは新人エラーとすることができるエラーメッセージ

"Uncaught TypeError: buttonPosition.insertAdjacentHTML is not a function at :1:16"

を取得ボタンが「ボタン黒」

buttonPosition.insertAdjacentHTML("afterend", "<button>Hello</button"); 

後ろに配置取得する.insertAdjacementHTML関数を使用してみましたコーディングが非常に新しいです。どんな助けでも大歓迎です。ありがとう。

Answer 1

これは、getElementById()の値が要素のID名ではなく要素であるためです。このように、その後、値としてgetElementById()にそのID名を渡すあなたのボタンのIDを追加してみてください：

HTML

<button class="button black" id="btn">Your button with an ID</button> 

Javascriptを

var btn = document.getElementById('btn'); // The button itself with an ID of 'btn' 
var newButton = '<button>New button</button>'; // New button to be inserted 

btn.insertAdjacentHTML('afterend', newButton); 

Answer 2

"のdocument.getElementById"自体が明確に要素の "id"が必要であることを示します。あなたのスニペットではvar buttonPosition = document.getElementById('<button class="button black ">Black</button>');私はあなたが "ID"が欠けていると言うことができますが、要素自体。

ソリューション1 :: のようなそのIDを使用しようし、ボタンにIDを入力すると：

<button class="button black " id="btn">Black</button> 

Javascriptを：

var buttonPosition = document.getElementById('btn'); 

ソリューション2 ::

IDを指定できない場合は、クラス名を使用します。

var buttonPosition = document.getElementsByClassName('button')[0]; 
var newButton = '<button>Button</button>'; 
buttonPosition.insertAdjacentHTML('afterend', newButton);