javascript - 使用一个命令放置一个按钮及其 div

Question

目前，我有一个 button允许我在句子中放置一个可点击按钮的类，以及一个 div类允许我将内容添加到我放置在包含句子的段落末尾的按钮。

这是我如何使用它们的示例

Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?

当此文本显示在页面上时，这两个句子放在两个不同的段落中，因此 div物体放在它们之间。

这是一个带有 css 类和 javascript 的片段。

( function() {
    coll = document.getElementsByClassName("col");
    conn = document.getElementsByClassName("con");
    var i;
    for (i = 0; i < coll.length; i++) {
        coll[i].setAttribute('data-id', 'con' + i);
        conn[i].setAttribute('id', 'con' + i);
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = document.getElementById(this.getAttribute('data-id'));
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    }
} )();

.col {
  cursor: help;
  border-radius: 0;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  font-size: 1em;
  color: red;
}

.con {
  padding: 0 1em;
  max-height: 0;
  overflow: hidden;
  transition: .3s ease;
  background-color: yellow;
}

Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?

我想知道是否可以通过一个命令实现一个快捷方式来放置两个对象，即通过这样的方式获取前面的示例

Try to click [[THIS|nice!]] and see what happens.
Did you try?

我的意思是命令[[THIS|nice!]]应该放置对象 <button class="col">THIS</button>在相同的位置和对象<div class="con">nice!</div>在包含命令的段落末尾。

是否可以实现这样的命令(或类似命令)？

编辑

忘记说了，按钮的内容，也就是div里面写的，应该也可以是wordpress的shortcode，就是一段较长的代码或文字的shortcut/macro。

Answer 1

使用 jQuery，closest()找到最近的 <p>元素并添加 <div class="con">nice!</div>在 <p> 之后元素。要切换，您可以使用类 active并添加或删除 .con元素。

$('.col').click(function(){
    let traget = $(this).closest('p');
    if(traget.hasClass('active')) {
       traget.removeClass('active');
       traget.next('.con').remove();
    } else {
       traget.addClass('active');
       traget.after(`<div class="con">${$(this).data('message')}</div>`);   
    } 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Try to click <button class="col" data-message="Hello">THIS</button> and see what happens.</p>
<p>Did you try?</p>