Adding DOM elements dynamically on click of a button

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>

Where is the code responsible for handling the click? You should have a ng-click="addmission()" somewhere in html. Probably here: <a href="" ng-click="addmission()"><img id="addmissionpoint" … — Tomek Sułkowski
– Tomek Sułkowski, Commented Jun 21, 2015 at 11:57
This is not very angularish. Usually you have to keep your views & data completely decoupled. Check out github.com/angular-ui/ui-router . If you need multiple views of same type. Usually you store data in your service and load 1 generic view. And add data dynamically through controller. — kishanio
– kishanio, Commented Jun 21, 2015 at 12:16
Are you looking for complete angular solution then i can answer it by using above use case but with context of decoupling views & data. — kishanio
– kishanio, Commented Jun 21, 2015 at 12:18

Jonathan Dumaine · Accepted Answer · 2015-06-22 12:47:17Z

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/

Sajal · Accepted Answer · 2015-06-21 11:58:47Z

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.

i have to add them dynamically, may be more than one time....so i think ng-show will not work

natnai · Accepted Answer · 2015-06-21 14:06:28Z

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.

Collectives™ on Stack Overflow

Adding DOM elements dynamically on click of a button

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related