为什么我的innerHTML覆盖父类的样式属性?以及我该如何解决这个问题

Question

im Aron和我是javascript 的新手

这是我的问题：

我正在尝试从html中的表单输入创建新内容但是，如果在表单中输入多个字符，则新的html不会按正确的宽度进行分解。

我希望我解释得对。这是我的网站的链接

这是我的javascript：

function plaatsMagnet()
    {
        console.log('plaatsMagnet');
        $('#magnetcontent').prepend('<div id="magnetjes" class="large-3 columns"></div>');
        var textmagnet = $('#textMagnet').val()
        var naammagnet = $('#inhoud').val()

        var 
        divTag = document.createElement("div");
        divTag.id = "magnetje";
              divTag.className =" panel";
              divTag.innerHTML =   "<h5>" + (naammagnet) + "</h5>" + "<p>" + (textmagnet) + "</p>";
        $('#magnetjes').append(divTag);

    };

我真的希望你们能帮助我！：）

Answer 1

 jesCount = 0; // will keep the counter for magnetjes divs
 jeCount = 0; // will keep the counter for magnetje divs 
 // All the ids will be unique, magnetjes0,magnetjes1.... and magnetje0, magnetje1...
// if you can mantain an array instead it will be better.
// I have taken counters as global vars to show different id implementations for each div. I deally you should encapsulate such change in a function.
function plaatsMagnet()
{
    console.log('plaatsMagnet');
    $('#magnetcontent').prepend('<div id="magnetjes'+ jesCount +'" class="large-3 columns"></div>');
    var textmagnet = $('#textMagnet').val()
    var naammagnet = $('#inhoud').val()

    var 
    divTag = document.createElement("div");
    divTag.id = "magnetje" + jeCount; // will increment the current value and 
          jeCount++;
          divTag.className =" panel";
          divTag.innerHTML =   "<h5>" + (naammagnet) + "</h5>" + "<p>" + (textmagnet) + "</p>";
    $('#magnetjes'+jesCount).append(divTag);
     jesCount++;

};