如何使用JavaScript更改标签

Question

我们有一个需要单页应用程序的项目。 目前，我有这个HTML /轮播页面来创建问题。 如您所见，根本没有输入。 必须通过javascript使它成为可能。 您看到的每个H都有一个onclick事件，当您单击标记本身时，必须将其转换为输入标记。

有什么帮助吗？ 我以为我已经找到了出路，但这没用

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

您可以将点击更新为：

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

以及更多角度的方式，您可以在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" />');
          });
       }
    };
});

根据文档：

如果有jQuery，则angular.element是jQuery函数的别名。 如果没有jQuery，则angular.element会委托Angular的内置jQuery子集，称为“ jQuery lite”或“ jqLit​​e”。

---

jqLit​​e是jQuery的一个很小的，与API兼容的子集，它允许Angular以跨浏览器兼容的方式操作DOM。 jqLit​​e仅实现最常用的功能，目的是占用很小的空间。

_{jqLit​​e已经以angular的方式实现，它具有最常用的方法。 如果您在angular之前加载jQuery，则将使用功能齐全的jQuery方法。}

Answer 2

只需向封闭元素添加一个id，删除当前内容，然后使用DOM API插入新节点。

因此，例如，您为其指定id myId ，则可以执行以下操作：

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);

或以jQuery方式：

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

Answer 3

一个非常简单的选项是使用占位符设置输入的样式，使其与普通文本一样显示，只要它没有焦点即可：

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

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

如果需要，还可以设置占位符文本的样式 。

---

而且我看到您正在使用AngularJS，这使此操作变得容易得多：

切换：

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

或者只是消失的“显示”元素/按钮：

<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

我认为H标签应该足够智能以呈现输入。 您可以放置​​“ renderinput”之类的类，然后添加诸如

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

和js代码如下所示：

      $(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);
        });
});

这将确保您仅使用html播放，而不需要需要其他H标签的情况下触摸js。

Answer 6

脚本代码必须放在CarouselTag内才能起作用。

也许专家可以对此给出非常明确的解释。 尽管对于某些想要相同方法的人来说这是一个解决方案