如何使用JavaScript添加动态HTML内容（DIV）？

Question

我需要在从服务器端返回数据时添加动态html的帮助。 我正在使用ajax / jQuery处理服务器端处理要求。 目前，ajax的成功代码部分我可以编写html元素（请参见下面的ajax ），但这对于演示页来说还可以，但是对于真实代码，这使我需要在html代码中编写这些html呈现的代码。

在HTML页面中，我包含了html代码，当用户单击“提交”按钮并在背面隐藏视图（div id）时，该代码希望显示给用户。 我可以告诉JavaScript动态添加此html代码吗？ 从服务器端，我只想在下面传递以下值

<div id="package-header-message">
            <div class="spacer-vertical"></div>
            <div>Your incident was submitted on December 04, 2013 at 11:38:53 am EDT. Your test-CERT Incident ID number is: </div>
            <div class="spacer-vertical"></div>
            <div class="bold left-indent">2013-testCERTv36LBQB</div>
            <div class="spacer-vertical"></div>
          </div>  

我希望其值2013-testCERTv36LBQB根据服务器的响应进行设置。 我可以在.ajax下执行此操作，但是我也可以使用javascript为我添加此值吗？

如果有人可以帮助我定义执行流程，我将不胜感激。

的HTML

<div id="frm">  
<form name="frm" method="POST" action="">
    <input type="text" name="name" id="name" value="" />
    <input type="text" name="last_name" id="last_name" value="" />
    <input type="submit" name="Update" id="update" value="Update" />
</form>
</div>  

<!-- <div id="region-content" class="grid-12 region region-content">
  <div class="region-inner region-content-inner">
    <a id="main-content"></a>
                <h1 id="page-title" class="title">Thank you for your incident submission.</h1>
                        <div id="block-system-main" class="block block-system block-main block-system-main odd block-without-title">
  <div class="block-inner clearfix">

    <div class="content clearfix">

          <div id="package-header-message">
            <div class="spacer-vertical"></div>
            <div>Your incident was submitted on December 04, 2013 at 11:38:53 am EDT. Your test-CERT Incident ID number is: </div>
            <div class="spacer-vertical"></div>
            <div class="bold left-indent">2013-testCERTv36LBQB</div>
            <div class="spacer-vertical"></div>
          </div>                       
          <p>
            The test-CERT Watch staff may contact you based on the information submitted. If you have any questions regarding this incident or would like to provide test with any edits or changes to this information, please contact test-CERT Security Operations Center at:
            </p><ul>
              <li>Phone: +1 888-282-0870</li>
              <li>Email: <a href="mailto:soc@test.com" title="Send email to the Security Operations Center Email: soc@test-cert.gov">soc@test-cert.gov</a></li>
              <li>Web: <a href="/" title="Go back to the test-CERT Homepage">http://www.test-cert.gov/</a>.</li>
            </ul>
          <p></p>
          <p>
            Secure phone and fax are available upon request. Contact test-CERT Watch at the above phone number to coordinate.
          </p>
          <p><a title="Submit another incident report" href="/forms/report">Click here</a> to submit another incident report or you can return to the <a href="/" title="Go back to the test-CERT Homepage">test-CERT Homepage</a>.
          </p>
              </div>
  </div>
</div>      </div>
</div>-->

ajax / jquery

  $("#update").click(function (e) {
        e.preventDefault();
        var name = $("#name").val();
        var last_name = $("#last_name").val();
        var dataString = 'name=' + name + '&last_name=' + last_name; 
alert(dataString);
        $.ajax({  
  type: "POST",  
  url: "bin/process.php",  
  data: dataString,  

   success: function(data) {  
      alert("ff");
  // var ctrlArray = data.split('&'); 
 if(result.indexOf("pass") > -1)      
//alert("ff");
    $('#frm').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  
    .hide()  
    .fadeIn(1500, function() {  
      $('#message').append("<img id='checkmark' src='images/check.png' />");  
    });  
  }  
});  
return false;

  })

演示

Answer 1

为什么不让要显示的html静态部分已经存在（或可能在单独的模板.html文件中）却被隐藏了，只填充请求成功时获得的数据即可。 然后，您可以取消隐藏它。

$('.left-indent').text(data.value); //where data.value, say, equals "2013-testCERTv36LBQB"
$(#package-header-message').show();

Answer 2

设置并从服务器返回日期也是明智的，这样您就可以掌握发生事件的中央权限。 通常，以毫秒为单位打包是一个好主意，因为这为客户端开发人员提供了很多选择，并使时区等方面的事情变得更容易管理。因此，假设您将以下JSON传递给了客户端：

{
    responseDate:1386181171730,
    userId:'2013-testCERTv36LBQB'
}

这通常是我通常使用{{}}处理HTML格式（标记要替换的变量）的方式。

function createPhm(ajaxSuccessObject){

    var //var block

    phm =[ //array/whitespace format so we can still view/edit in an HTML-ish format
        '<div id="package-header-message">',

            '<p>Your incident was submitted on {{DATE}}. Your test-CERT Incident ID number is:</p>',

            '<span class="bold left-indent">{{USER_ID}}</span>',

         '</div>'

    ].join(''), //converted to string

    injectedValues = {
        DATE = Date( ajaxSuccessObject.date ),
        USER_ID = ajaxSuccessObject.userId
    }

    ;//end var block



    return ( injectValues( injectedValues, phm ) );
}

//broke this out for more generic handling of HTML
function injectValues(valuesObj, targetString){
    for(var x in valuesObj){

        var globalRegExMatcher = new RegExp('\\{\\{'+ x +'\\}\\}','g');

        targetString = targetString.replace( globalRegExMatcher, valuesObj[x] );
    }

    return targetString;
}

因此，您的ajax成功功能可能类似于：

...
    success: function(jsonObj){
        $( createPhm(jsonObj) ).appendTo('#frm'); //or prependTo for putting at top
    },
...

快速说明：不要像以前那样使用.html。 这将替换容器中的所有html。 基本上它只是innerHTML。

另外，如果您拥有永不改变的HTML，请将其放入HTML文件中。 我通常在HTML文件中只有一个空的<div id="package-header-message"></div> ，然后直接将.html插入其中，但希望保持html相似以避免混淆。