单击按钮即可动态添加DOM元素

Question

I want to add the DOM elements to a page on click of a button, i have written the code of the things to be added in a new html file called "newmission.html" as shown below.

 <div class="boxheader" ng-controller="edit_vision_missionCtrl">
    <div style="float:right; clear:right; width:20%;">
        <span><a href="" style="" ng-click="deletemission(mission.id)"><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span>
    </div>
    <span style="font-size: large; font-family: monospace; font-weight: bold;">EDIT MISSION NAME</span><input type="text" value="Enter Mission Name" class="form-control" style="background-color: #e8e8e8">
</div>
<div style="padding-top: 10px;">
    <span style="font-size: large; font-family: monospace; font-weight: bold; margin-left:5%;">EDIT MISSION POINTS</span><br />
</div>
<div style="padding-top: 10px;">
    <ul style="float: left; width: 100%;">
        <li style="padding: 2px; width: 100%;">
            <div style="float:right; clear:right; width:20%;">
                <span><a href="" style=""><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span>
            </div>
            <div>
                <input type="text" value="Enter Mission Point" class="form-control" style="background-color: #e8e8e8; width: 80%;">
            </div>
        </li>
    </ul>
</div>
<div style="padding-top: 35px;">
    <a href=""><img id="addmissionpoint" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a>
</div>

I am calling a function "addmission" which is in the controller, that adds the above html file contents in a div having id "toappend" but it is not working. I am using JQuery to add this, but angularJS or Javascript solutions will also be helpful. the function in the controller is shown below.

var newid = 0;
$scope.addmission = function(){
    newid--;
    $.get("newmission.html", function(data) {
        $("#toappend").prepend(data);
    });
};

This is the code from where i am calling the function.

<div style="padding-top: 35px;">
        <a href="" ng-click="addmission()"><img id="addmission" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a>
    </div>

Answer 1

Its is simple using ng-show/ ng-hide

If you have a button as:

<button class="primary" ng-click="addmission()" >Addmission</button>

<div class="boxheader" ng-controller="edit_vision_missionCtrl" ng-show="whenAdmission" ng-cloak>
//all other code
</div>

When the event is fired , simple update the When admission flag to true as:

$scope.addmission = function(){
    $scope.whenAdmission = true;
};

This will render the cloaked html, otherwise it will remain hidden. Do initialize the flag as $scope.whenAdmission = false; on page load.

Answer 2

There are several ways of inserting new DOM nodes.

In your use case, since you have a string of HTML text and want to tell the browser to parse it into HTML elements, you'll want to use innerHTML .

var myElement = document.getElementById('myElement')
var someHTML = '<div style="color: blue;">I am <b>blue</b>!</div>"

myElement.innerHTML = someHTML;

This will tell the browser to parse the HTML string into elements and insert them into myElements children tree.

Since you're using jQuery you can use jQuery's $(...).html() which will likely call innerHTML anyways.

Now since you're using Angular, you may want to load your HTML as a template and render it as a partial instead of directly manipulating the DOM yourself (let Angular do the work). Here's a good article on loading templates dynamically: http://onehungrymind.com/angularjs-dynamic-templates/

Answer 3

You should never manipulate the DOM from your controller directly. That's a terrible, terrible idea, and it should NEVER be done. What I would do is to write a simple directive, or if you're really lazy, use ng-include. But for the love of God, don't directly insert stuff into the DOM from a controller. If you write a directive you can keep reusing the same element over and over again in all your projects, and trust me, that saves a lot of time.

Learn how to write directives. They're a bit convoluted on first blush but they're really powerful feature of Angular.