Question

我有一个div，我必须填写一些数据。我必须根据条件呈现HTML，并使用jQuery向div添加数据。有人可以告诉我如何在页面上添加基于条件的HTML插入吗？

      function AddData()
    {   
        var data = "<div><h1>My data</h1>"
             if(jsVariable){
                  <p>The JSVariable is present on page </p>                
                        }
               +"</div>"
            $('.myDiv').after("<br/>"+data);
    }

Answer 1

  function AddData(){   
    if(typeOf(jsVariable)!=="undefined"){ 
      var data =  "<div><h1>My data</h1>";
          data += "  <p>The JSVariable is present on page </p>";                
          data += "</div>";
       $('.myDiv').after("<br/>"+data);     
      }
}

这应该可以解决问题，但是一些myDiv类的元素需要已经存在才能实现

 <div class="myDiv"></div>

Answer 2

  function AddData()
    {   
        var data = "<div><h1>My data</h1>"
             if(jsVariable){
                  data = data + "<p>The JSVariable is present on page </p>"     
              }
             data = data + "</div>"
            $('.myDiv').append("<br/>"+data);
    }

Answer 3

您的代码无效。

你能解释一下你想用

做什么

if(jsVariable){
    <p>The JSVariable is present on page </p>                
}
+"</div>"

如果要在div的末尾添加html代码，则应使用

$('.myDiv').append('<p>Text text text text</p>');

Answer 4

你到底想要做什么？

如果你只想根据变量添加一些额外的html内容，那么你差不多完成了。您只需将<p>部分添加到数据(data += "<p>...</p>")即可。

如果您尝试根据变量添加所有html，请将if语句放在$(".myDiv").after周围（应该是$(".myDiv").append btw）。

Answer 5

if (condition) {
   $('div#yourDivID').html('<p>The JSVariable is present on page </p>');
}

除了.html（将html放在div中）之外，您还可以使用其他内容，例如append，prepend等。查看jQuery在DOM Insertion上的文档。

Answer 6

简单用法：

<!DOCTYPE html>
<html>
<head>
<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

</script>
<script>
    $(document).ready(function() {
        $("p").click(function() {
            var a = $("#div1").text();
            if (a == "one") {
                $("#div2").text(a);
            }
        });
    });
</script>
</head>
<body>
    <div id="div1">one</div>
    <div id="div2"></div>
    <p>click me</p>
</body>
</html>

Answer 7

function addData(to)
{
    var h1   = $('<h1>').text('My Data');
    var data = $('<div>').append(h1);

    if (window.jsVariable) {
        $('<p>').text('JS Variable is present on the page').appendTo(data);
    }

    to.append(data);
}

addData( $('.myDiv') );

Answer 8

这是一个JSFiddle http://jsfiddle.net/va4n8/

function addData() {
    var newDiv = $('<div>');
    newDiv.append($('<h1>').html('My data'));

    if ('jsVariable' in window) {
        newDiv.append($('<p>').html('The JSVariable is present on page'));
    }

    $('.mydiv').after($('<br>')).after(newDiv);
}

基于JavaScript或jQuery中的条件逻辑将HTML添加到页面

8 个答案: