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

Why is my innerHTML is overwriting style properties of the parent class? and how do i solve this?

本文关键字:何解决 解决 问题 父类 覆盖 innerHTML 我的 样式 属性 为什么      更新时间:2023-09-26

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);

    };

我真的希望你们能帮助我!:)

 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++;

};