Jquery - 在gmail签名之前插入文本答案

【问题标题】：Jquery - Insert text before gmail signatureJquery - 在gmail签名之前插入文本
【发布时间】：2017-05-01 16:04:43
【问题描述】：

我正在基于InboxSDK 构建一个实用程序，它会在您的电子邮件末尾（但在签名之前）插入文本。 InboxSDK 将消息正文作为 HTML 元素提供给您，我正在尝试使用一些 Jquery 来放置文本。复杂之处在于用户可能拥有的不同“类型”签名。我将它们分为 3 个。

无签名
'--' 签名
没有“--”签名

2 和 3 是困难的。这是两种情况下的 HTML。

<div id=":nv" class="Am Al editable LW-avf" hidefocus="true" aria-label="Message Body" g_editable="true" role="textbox" contenteditable="true" tabindex="1" style="direction: ltr; min-height: 309px;">
    <br clear="all">
    <div>
        <!--
            <div>
              Injected Text
            </div>
        -->
        <br>
    </div>--
    <br>
    <div class="gmail_signature" data-smartmail="gmail_signature">
        <!-- Signature Content -->
    </div>
</div>

<div id=":nv" class="Am Al editable LW-avf" hidefocus="true" aria-label="Message Body" g_editable="true" role="textbox" contenteditable="true" tabindex="1" style="direction: ltr; min-height: 309px;">
<br clear="all">
<div>
    <!--
        <div>
          Injected Text
        </div>
    -->
    <div class="gmail_signature" data-smartmail="gmail_signature">
        <!-- Signature Content -->
    </div>
</div>

当“--”存在时，我希望将注入的新文本 <div> 放置在第一个子 div 中。当它不存在时，我希望它作为消息正文的直接子代，在签名前一个 div。

最优雅的 jquer-ish 方法是什么？

Gmail Signature Options

【问题讨论】：

标签： javascript jquery html gmail

【解决方案1】：

好的，我想我明白了。

var insertDiv = $(`<div>${text}</div>`);
var emailBody = window.gmailComposer.getBodyElement();

if( $('[data-smartmail="gmail_signature"]').length > 0 ) { //if there is indeed a signature block.
  if ( $(emailBody).children().has('[data-smartmail="gmail_signature"]').length == 0 ) { //if we have 'double dash' mode enabled.
    insertDiv.insertAfter($('[aria-label="Message Body"] > div:not(\'[data-smartmail="gmail_signature"]\'):last'), emailBody); //insert the text in the last div before the "--" div
  } else { //'double dash' mode disabled
    insertDiv.insertBefore($('[data-smartmail="gmail_signature"]'), emailBody); //insert the text before the signature
  }
} else { //no signature
  $(emailBody).append(insertDiv); //insert the text at the end of the email
}

【讨论】：

【解决方案2】：

您是否尝试过使用 jQuery prepend() 作为第一个子元素追加，并尝试使用 before()/insertBefore() 在元素之前添加？

这里是文档的链接：

http://api.jquery.com/prepend/

http://api.jquery.com/before/

【讨论】：

我知道这些功能，我想我更喜欢确定呈现哪种情况，然后应用适当的 JQ 功能。
给你的主容器添加一个id，这个容器将被内容填充。然后这样查找元素：if ($( "#myDiv divExpected" ).length > 0) // use prepend because the element exists else // use before because the element doesn't exist
在两种情况下（2 和 3）都存在签名。所以很遗憾，您的建议并没有消除歧义。
这个措辞怎么样。 “我如何判断签名是主容器的子代还是孙代？”这将为我提供所提出的案例。
您可以使用$(element).children().length 或$(element).parents().length 来获取元素的当前深度。您能否在两种情况下都粘贴返回的结构？应该更容易理解你得到了什么以及如何实现你的目标

【解决方案3】：

var foo = $(document.getElementById(":nv")).children("br:first").next();
var divToAdd = $("<div></div>").text("Injected Div");

foo.prepend(divToAdd);

这应该可行。需要注意的一点是 $(document.getElementById(":nv")) 比 $("\\:nv") 快，但您可以访问该元素使用任何一种方法。

【讨论】：

不幸的是，我试图将文本作为签名前的最后一个 div 注入。这似乎将新的 div 放在了电子邮件的顶部。