HTML Tags durch JS erstellen

tklustig

Erfahrenes Mitglied
Hallo Leute,
benutze derzeit folgenden Code:
Javascript:
var breite = document.body.offsetWidth;
if (breite > 500) {
        document.createElement('<div class="container">');
        document.createElement('<div class="row">');
        document.createElement('<img class="col-md-6" alt="pic_1" src="<?= $url ?>T1.jpg">');
        document.createElement(' <img class="col-md-6" alt="pic_2" src="<?= $url ?>T2.jpg">');
}
Durch die Leerzeichen wird die Exception:
Uncaught DOMException: String contains an invalid character
ausgeworfen. Weiß jemand, wie ich über JS obige HTML Tags implementieren kann?
 
Zuletzt bearbeitet von einem Moderator:

tklustig

Erfahrenes Mitglied
Bin von selbst drauf gekommen. So codiere ich das jetzt:
Javascript:
<div id='insertTemplate0'></div>
<div id='insertTemplate1'></div>
<script id='script-template0' type='text/template'>
    <br><br><br><br><br>
    <div class='container'>
    <div class='row'>
    <img class='col-xs-6'>
    <img id= 'showPic1' class='col-xs-6' alt='pic_1' src='<?= $urlPic ?>T5.jpg'>
    <img id= 'showPic2' class='col-xs-6' alt='pic_2' src='<?= $urlPic ?>T2.jpg'>
    <img class='col-xs-6'>
    </div>
    </div>  
</script>
<script id='script-template1' type='text/template'>
    <div class='container'>
    <div class='row'>
    <div class='col-lg-3'></div>
    <img id= 'showPic3' class='col-lg-3' alt='pic_1' src='<?= $urlPic ?>T5.jpg'>        
    <img id= "showPic4" class='col-lg-3' alt='pic_1' src='<?= $urlPic ?>T2.jpg'>
    <div class='col-lg-3'></div>
    </div>
    </div>
    <br><br><br><br><br><br><br><br>
    <div class='container'>
    <div class='row'>
    <div class='col-lg-3'></div>
    <img id= 'showPic5' class='col-lg-3' alt='pic_3' src='<?= $urlPic ?>T3.jpg'>
    <img id= 'showPic6' class='col-lg-3' alt='pic_4' src='<?= $urlPic ?>T4.jpg'>
    <div class='col-lg-3'></div> 
    </div>
    </div> 
</script>
<script>
    var breite = document.body.offsetWidth;
    if (breite <= 500) {
        var content = "Sie surfen offensichtlich mit einem Smartphone. Diese Applikation ist zwar reponsive Designed, aber mit einem größeren Bildschirm machen Sie sich die Arbeit bedeutend einfacher!";
        alert(content);
        var template = document.querySelector('#script-template0').innerHTML;
        document.querySelector('#insertTemplate0').innerHTML = template;
    } else if (breite > 500) {
        var template = document.querySelector('#script-template1').innerHTML;
        document.querySelector('#insertTemplate1').innerHTML = template;
    }
</script>
 
Zuletzt bearbeitet von einem Moderator: