如何使用javascript更改标记

我们有一个项目，需要一个单页的应用程序。目前，我有这个HTML/carousel页面来创建问题。如您所见，根本没有输入。这必须通过javascript实现。对于每小时一次的onclick事件，当您单击标记本身时，必须将其转换为输入标记

有什么帮助吗？我以为我找到了解决办法，但没用

HTML:

jQuery：

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

---

只需向封闭元素添加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"/>'));

---

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

输入{ 边界：无； 颜色：黑色； } 输入：焦点{ 边框：1px纯黑； } $'h1、h2、h3、h4、h5'。单击功能{ $this.replaceWith+this.innerHTML+； }; 文本1 文本2 文本3

---

您可以将单击更新为：

$('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或jqLite

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

---

脚本代码必须放在CarouselTag中才能正常工作

---

也许专家可以对此给出非常清楚的解释。虽然这是一个解决方案，但对于一些希望使用相同方法的人来说，我认为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而不是触摸js，以防需要另一个H标记。

您可以在有人单击H标记时隐藏并显示此标记。如果您使用angularjs，则应添加angularjs的标记。使用angularjs很容易做到这一点。到目前为止，所有答案都没有优化，因为您没有提及that@SeeSharp：我在问题中看到一些有角度的内容后添加了标签，并在我的答案中添加了一个角度选项…因为你没有提到AngularJS，所以向下投票不是很有建设性，我可能会说完全从页面中删除元素？我不确定这是否是你想要的。你可以把它藏起来。此外，您还可以将附加链接到空字符串之后。现在，由于OP似乎在使用AngularJS，您真的不想手动执行DOM操作。OP说他想更改它，而不是隐藏它。否则你是对的。选民：想详细说明一下吗？如果我犯了错误，我想从中吸取教训。

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

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