Hinzufügen von Inhalt zu div mit Javascript - 'Uncaught SyntaxError: Ungültiges oder unerwartetes Token'?

Question

ich diesen Fehler aus dem folgenden Code:

Uncaught SyntaxError: Invalid or unexpected token

var d1 = document.getElementById('grid'); 
d1.insertAdjacentHTML('beforeend', ' <figure> 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt=""> 
    <figcaption> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
    </figcaption> 
</figure>'); 

Jsfiddle

Answer 1

die Zeilenumbrüche in der Zeichenfolge das Problem verursachen. Um dies zu beheben können Sie die Zeichenfolge in einer einzigen Zeile setzen:

var d1 = document.getElementById('grid'); 
d1.insertAdjacentHTML('beforeend', '<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt=""><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</figcaption></figure>'); 

Updated fiddle

Oder alternativ können Sie es auf verschiedenen Linien verketten:

var d1 = document.getElementById('grid'); 
d1.insertAdjacentHTML('beforeend', '<figure>' + 
    '<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/placeimg01.jpg" alt="">' + 
    '<figcaption>' + 
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' + 
    '</figcaption>' + 
'</figure>'); 

Example fiddle