我如何在javascript函數內為div添加類

Question

伙計們，我需要在javascript函數內為div添加一個類。 我想在每個gency_name ， ADRESS_TEXT和phone gency_name放一個盒子我該怎么做

  function jsFilt(value) {
                   document.getElementById("myDiv").innerHTML = "";
                    value.AGENCY.forEach(agency => {
                        $("#myDiv").append(
                       //HERE     "<div class ="xxx" style='border-style:ridge' ><strong>Agency Name :</strong>  " + agency.agency_name + "<br>" +
                            "<strong>Adress : </strong> " + agency.ADRESS_TEXT + "<br> "+
                            "<strong>Phone :</strong>  " + agency.phone + "<br></div>"
                        );
                    });
                }

CSS

.xxx{
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0px;
}

Answer 1

正如其他人所說，有兩種方法： .addClass('classname1 classname2')和.attr('class','classname1 classname2')但addClass更好

在您的情況下將是：

function jsFilt(value) {
  console.log('running jsFilt');
  //document.getElementById("myDiv").innerHTML = "";
  $('#myDiv').html(''); // this is jquery way of doing it
  console.log('myDiv is now empty');

  value.AGENCY.forEach(agency => {
    console.log('inside loop');
        //first we create that div and give it class and style
        const $div = $('<div></div>').addClass('xxx').attr('style','border-style:ridge;');
        // here we set innerHTML
        $div.html(`
            <strong>Agency Name :</strong>  ` + agency.agency_name + `<br>
            <strong>Adress : </strong> ` + agency.ADRESS_TEXT + `<br>  
            <strong>Phone :</strong> ` + agency.phone + `<br>
        `);

        console.log('here is the div we created:',$div);

        // here we append it to the container (#myDiv)
        $("#myDiv").append($div);
        console.log('this is how myDiv looks like now', $("#myDiv"));
    });
}

確保調用課程jsFilt(someValue)的函數

我在代碼中放了一些console.log('bla bla') ，如果您打開瀏覽器控制台，您會看到一些消息被打印出來，並且可以幫助您跟蹤問題。 一切正常后，您可以刪除console.log()

因此，這可能有效或可能存在一些語法錯誤。 讓我知道您是否可以使用它

Answer 2

您可以在追加后將class添加到div中，例如：

    function jsFilt(value) {
                   document.getElementById("myDiv").innerHTML = "";
                    value.AGENCY.forEach(agency => {
                        $("#myDiv").append(
                            "<strong>Adress : </strong> " + agency.ADRESS_TEXT + "<br> "+
                            "<strong>Phone :</strong>  " + agency.phone + "<br></div>"
                        ).addClass("CLASSNAME1 CLASSNAME2");
                    });
                }