What is the best way to add a new content control to the bottom of a document using insertContentControl

When working with JavaScript, my goal is to add a call to insertContentControl() at the very end of the document, following any content in the main body. Initially, I believed this could be achieved through:

      context.document.getSelection();
      var cc = context.document.body.insertContentControl();
      cc.color = 'orange';
      cc.tag = 'wikindx-bibliography';
      cc.title = 'Bibliography';
      cc.insertHtml('A reference', "End");

However, this approach simply combines existing text within the content control and then adds 'A reference' to it.

javascriptopenxmlword-addins

Answer №1

Success!

      Running this code snippet will achieve the desired result:
      context.document.body.paragraphs.getLast().select("End");
      var sel = context.document.getSelection();
      sel.insertParagraph('', "After");
      sel.insertParagraph('', "After");
      context.document.body.paragraphs.getLast().select("End");
      sel = context.document.getSelection();
      var cc = sel.insertContentControl();
      cc.color = 'orange';
      cc.tag = 'wikindx-bibliography';
      cc.title = 'Bibliography';
      cc.insertHtml('A reference', "End");

(Including some empty paragraphs for spacing purposes.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to get jQuery waypoints to function on local server

Currently, I am working with jQuery. I downloaded an example shortcut for infinite scroll from jQuery Waypoints and tried to use it. However, when the page reaches the end, the web console displays the following error: XMLHttpRequest cannot load file:// ...

javascriptjquery

Having trouble retrieving JSON data from an API using jQuery's AJAX method

Currently, I am attempting to retrieve a JSON object from an API endpoint using jQuery and AJAX. Here is the code that I have been working with: $.ajax({ url: 'https://this-specific-website.com/customers.json', type: 'GET', ...

javascriptjqueryjsonajaxurl

Why does my event dispatch only run once upon form submission in Svelte JS?

My code successfully fetches data and puts it in a card when new data is added to the input. However, the issue arises when more than one data entry is made - although the data gets added to the database, it does not reflect in the data list. Can anyone he ...

javascriptvue.jseventsdispatchsvelte

Perpetually misplacing session state in ASP.NET

My website keeps losing session state, logging users out without explanation. I've been troubleshooting but can't pinpoint the cause. I implemented an action filter to verify if the UserSession exists; if not, it checks if the user is authentica ...

javascriptasp.netajaxsession

Hyphens make Tablesorter sort numeric fields uniquely

I have a table where data is displayed in the format of YYYY-####. Sometimes, there are values like 2012-456 and 2012-1234. By default, the sorting places 2012-1234 before 2012-456. If I change the sort to 'numeric', it disrupts the order of othe ...

javascripttablesorter

Is there a way to properly test a Vue component that is watching a ref prop?

I am currently testing a Vue component that should display a success icon for 3 seconds when the loading state changes from true to false. I have encountered challenges while trying to write a component test using Vue Testing Library or Vue test utils du ...

javascripttypescriptvue.jsunit-testingvuejs3

Having trouble with fixing the width and aligning a custom scrollbar in the center

I have been working on creating a carousel with items that are horizontally aligned. With the requirement of having each child element (approximately a dozen) to fill one third of the parent's width and displaying three items at once, I utilized Boot ...

javascriptcsscarousel

Steps for sending Ajax data to your server in order to make changes to your SharePoint list information

After spending a considerable amount of time working on my DataTable, I've managed to incorporate all the necessary functionalities except for one. Currently, my table retrieves data from a SharePoint list through an AJAX "GET" Request and organizes i ...

javascriptjqueryajaxsharepointdatatables

The behavior of mouseover and mouseout functions becomes unpredictable in the presence of Vue JS transition components

Currently, I am developing a popup menu with the following structure: const menuItem = { props: ['name', 'val'], data() { return { showChild: false } }, template: /*html */ ` <div class="nav-item" @mouse ...

javascripthtmlcssnode.jsvue.js

Steps for adjusting button size in Sencha Touch

How can I resize a button in Sencha Touch 2 to make it smaller? I need to change its height. Any sample code you could provide would be greatly appreciated! Thanks navigationBar: { items:[{ xtype: 'button', ...

javascriptextjssencha-touchsencha-touch-2sencha-touch-theming

Issues with executing href JavaScript in a Tampermonkey script

I am in the process of creating a script that will adjust the display property of a <td> element. Here is what I have so far: // ==UserScript== // @name Dema VOC hide // @version 0.1 // @include http://mywebsite.com/* // @require ...

javascriptjquerygreasemonkeytampermonkey

The React input field seems to be unresponsive to updates

I'm working on a React/Next application where users can create and update notes/jobs. However, I am facing an issue with my onChange={handleChange} function when trying to edit the input fields. Can anyone point out what might be going wrong? Thank y ...

javascriptreactjsapinext.js

What are some ways to streamline and improve the readability of my if/else if statement?

I've created a Rock Paper Scissors game that runs in the console. It currently uses multiple if/else if statements to compare user input against the computer's selection and determine a winner. The code is quite lengthy and repetitive, so I' ...

javascriptfunctionconditional-statements

A comprehensive guide on accessing attributes of dynamically generated div elements with jQuery

I am currently working on fetching a list of users from a basic MySQL database table named TableA. The table structure includes fields like Username (varchar), Level (tinyint), and DateCreated (datetime). On an HTML page, there is a search input box, let& ...

javascriptphpjqueryhtmlmysql

Using multiple versions of JQuery on a single page may result in dysfunctional features

Is there a need to load custom JavaScript on a page after it has fully loaded? This can be achieved using a third-party tool that allows execution on live pages of the website post-loading. However, encountering an issue where the page contains numerous J ...

javascriptjquery

An error is encountered with the 'this' keyword in the map operator of Angular

I am in the process of developing a custom validator for a Slug form control and have encountered an issue with my code. ngOnInit() { this.slugCtrl.setAsyncValidators(this.slugValidator); } slugValidator(control: AbstractControl) { const obs1 = c ...

javascriptangulartypescriptrxjsngrx

How can I deselect the 'select-all' checkbox when any of the child checkboxes are unchecked?

Here is the code provided where clicking on the select-all checkbox will check or uncheck all child checkboxes. If any child checkbox is deselected, the 'select-all' checkbox should also be unchecked. How can this be achieved? $(document).read ...

javascriptjqueryhtml

Creating a template based on an object type in JavaScript with Angular: A step-by-step guide

I have a collection of objects, each with a property indicating its type. Here's an example: [ { "type" : "date", ... },{ "type" : "phone", ... },{ "type" : "boolean", ... } ] I'm ...

javascriptangularjsoop

Passing data from one NodeJS page to another

I am working on creating a User management system in Node. My goal is to have a page that displays all users in a table format. When the edit button is clicked, I want to navigate to another page with detailed information about the selected user. However, ...

javascripthtmlnode.jsexpress

Hiding the style tag in the head section of a Laravel-Vue.js application with Vue.js

Currently, I am working on a Laravel-Vue.js application. I have noticed that when Vue.js renders CSS, it appends some style tags in the HTML head as shown in the image below. Is there a way to hide these tags? My initial thought is that it can be achieved ...

javascriptlaravelvue.jswebpackvuejs2