How change tags with javascript

Question

We have a project that demands an single page application. For the moment I have this HTML / carousel page to create questions. As you can see, there is no input at all. this must be made possible through javascript. with an onclick event every H you see, has to be converted to an input tag when you click on the tag itself.

Any help? I thought I had figured a way out, but it doesn't work

HTML:

  <div>
      <div ng-controller="CarouselDemoCtrl">
          <div style="height:10px;">
              <carousel interval="myInterval">
                  <slide ng-repeat="slide in slides" active="slide.active" >
                  <div class="CreateSlideCss">
                    <h1>
                        <div class="CreationTitel">
                            Click om uw titel op te geven
                        </div>
                    </h1>
                    <h2>
                        <div class="CreationVraag"> 
                            Click om uw vraag in te voeren .
                        </div>
                    </h2>
                    <button class="CreationVraagBtn" >click voor uw type vraag te selecteren</button>
                    <h3>
                        <textarea class="CreationAntwoordTxt" >hier is de content van uw antwoorden</textarea>
                    </h3>
                          <div class="carousel-caption">
                              <h4>Slide {{$index}}</h4>
                          </div>
                      </div>
                  </slide>
              </carousel>
          </div>
          <div class="row" >
              <div class="col-md-6">
                  <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
              </div>
          </div>
      </div>
  </div>

jQuery:

$( "button.CreationVraagBtn" ).click(function() {
    $( "div.CreationTitel" ).replaceWith( "<input value='" + "hallo" + "'></input>" );
});

Answer 1

You can update your click to this:

$('h1, h2, h3, h4, h5, h6').on('click', function(){
    $(this).html('<input type="text" />');
});

and more angular way, you can use this in your directive :

.directive('carousel', function() {
    return {
       restrict: 'E',
       templateUrl: function(elem, attr){
          angular.element(elem).find('h1, h2, h3, h4, h5, h6').on('click', function(){
              $(this).html('<input type="text" />');
          });
       }
    };
});

As per docs:

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite.".

---

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.

_{jqLite is already implemented in angular which has the most commonly used methods. if you load jQuery before angular then you will make use of fully functional jQuery methods.}

Answer 2

Simply add an id to the enclosing element, remove the current content, and insert your new node using the DOM API.

So for example, you give it the id myId , then you can do this:

var node = document.querySelector('#myId');
while (node.firstChild) {
    node.removeChild(node.firstChild);
}
var newNode = document.createElement('input');
// set up attributes
newNode.setAttribute('type', 'text');
newNode.setAttribute('value', 'hallo');
node.appendChild(newNode);

Or in a jQuery way:

$('#myId').empty();
$('#myId').append($('<input type="text" value="hallo"/>'));

Answer 3

A very simple option would be to style an input with a placeholder to display like normal text would, as long as it has no focus:

 input{ border:none; color:black; } input:focus{ border: 1px solid black; } 

 <input type="text" placeholder="Click om uw titel op te geven"/> 

You could also style the placeholder text , if you wish.

---

And I see you're using AngularJS, that makes this a lot easier:

A toggle:

<div class="CreationTitel">
    <span ng-click="showTitleInput = !showTitleInput">Click om uw titel op te geven</span>
    <input type="text" ng-show="showTitleInput"/>
</div>

Or just a "show" element / button that disappears:

<div class="CreationTitel">
    <span ng-click="showTitleInput = true" ng-hide="showTitleInput">Click om uw titel op te geven</span>
    <input type="text" ng-show="showTitleInput"/>
</div>

Answer 4

 $('h1, h2, h3, h4, h5').click(function() { $(this).replaceWith('<input>'+ this.innerHTML + '</input>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <h1>text 1</hi> <h2>text 2</h2> <h1>text 3</h1> </div> 

Answer 5

I think the H tag should intelligent enough to render an input . You can place a class like "renderinput" and then add data attributes like

<h1 class="renderinput" data-pickdata=".CreationTitel" data-placeusing="text"></h1>

and js code would look like :

      $(function () {
        $('.renderinput').on('click',function(){
          var $this = $(this);
        var input = $('<input></input>').attr({
        'type' : 'text'
          })
        .val($($this.data('pickdata'))[$this.data('placeusing')]());
        $this.replaceWith(input);
        });
});

this will make sure that you play only with html rather than touching js in case another H tag is needed.

Answer 6

Script code must be placed inside the CarouselTag in order to make it work.

perhaps an expert can give a verry clear explanation for this. although this is a solution for some who would like the same approach